developit / developit/simple-element-resize-detector
Resize detection only works in Chrome now
- Langage dominant
- JavaScript
- Étoiles
- 189
- Forks
- 4
- Métriques de merge des PR
- Aucune PR mergée en 30 j
Description
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
.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!');
});
```
Guide de contribution
Aucun guide de contribution indexé pour ce dépôt
Piste de recherche
Commencez par exécuter la reproduction HTML fournie dans Firefox 68 et non-Chromium Edge, puis comparez son comportement avec celui de Chrome. Suivez le point d’entrée du détecteur responsable du callback de redimensionnement de l’iframe et établissez si le problème est reproductible ; le travail est terminé lorsque les notifications de redimensionnement fonctionnent dans les navigateurs signalés ou que leur statut non pris en charge est clairement documenté.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- javascript
- Domaine
- frontend
- Type d'issue
- Bug
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- À clarifier
- Accessibilité débutants
- 30/100