developit / developit/simple-element-resize-detector

Resize detection only works in Chrome now

Abierto
#12 1 comentario 1 reacción 0 asignados Ver en GitHub
Lenguaje dominante
JavaScript
Estrellas
189
Forks
4
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

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!');
});

```

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.