Resize events only work if iframe in viewport

developit / simple-element-resize-detector

Observes element size changes using a hidden iframe

189 stars 7 forks source link

Resize events only work if iframe in viewport #10

Open luwes opened 6 years ago

luwes commented 6 years ago

The solution of top:-100%; and margin:1px 0 0; does not keep the iframe positioned in a viewable area at all times. If the target element is nested in an element with overflow: hidden and the target element has a negative top margin or a negative absolute positioned top the resize events stop working.

top: 0; z-index: -1 seems to fix the issue but I'm not sure what all the consequences are.

developit commented 5 years ago

Possible solution might be to use position:fixed and the z-index? It'll still be clipped, but being in a new stacking context will make it so browsers can't guarantee it's out of viewport.

luwes commented 5 years ago

Thanks! Unfortunately we don't use it anymore in the Vimeo player. A sweet fix if that works though!