developit / developit/simple-element-resize-detector

Resize detection only works in Chrome now

オープン
#12 コメント 1 件 リアクション 1 件 担当者 0 名 GitHub で見る
主要言語
JavaScript
スター
189
フォーク
4
PR マージ指標
30日以内にマージされた PR はありません

説明

I understand that at this point, this project seems to be no longer maintained. But I just want to point out, the code seems only work in Chrome (8/2019), which makes it a bit pointless because Chrome natively supports ResizeObserver. Firefox 68 and Edge (the non-chromium one) currently doesn't support ResizeObserver and this workaround also doesn't work with the two browsers. Here is my code in case I used in incorrectly:

```html


Why it doesn't work

This is the content that will be resized.


.dummy {
width: 100%;
background: red;
position: relative;
}


const CSS = `position:absolute;left:0;top:-100%;width:100%;height:100%;margin:1px 0 0;border:none;opacity:0;pointer-events:none;`;

function observe(element, handler) {
const frame = document.createElement('iframe');
const supportsPE =
document.documentMode < 11 && 'pointerEvents' in frame.style;

frame.style.cssText = `${CSS}${supportsPE ? '' : 'visibility:hidden;'}`;
frame.onload = () => {
frame.contentWindow.onresize = () => {
handler(element);
};
};
element.appendChild(frame);
return frame;
};

observe(document.querySelector('.dummy'), function () {
console.log('dummy: resized!');
});

```

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

調査の方向性

まず、提供された HTML 再現ケースを Firefox 68 と non-Chromium Edge で実行し、その後、Chrome での動作と比較します。iframe のリサイズコールバックを担当する detector のエントリポイントを追跡し、問題が再現可能かどうかを確認します。完了とは、報告されたブラウザーでリサイズ通知が機能するか、サポート対象外であることが明確に文書化されていることを意味します。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
javascript
領域
frontend
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
説明が足りない
初心者へのやさしさ
30/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。