que-etc/resize-observer-polyfill

Doesn't work with `resize`-able elements in Safari

eeeps opened this issue · 5 comments

eeeps commented

Test:
https://ericportis.com/etc/ResizeObserver-polyfill-resize-bug/

The box should turn yellow when wider than the red line. It does in Chrome and Firefox, but doesn’t in Safari (until I resize the viewport).

colececil commented

It seems that this same issue occurs in Microsoft Edge. The text area in the test page given by @eeeps is not resizable for some reason in Edge, so you'll have to use the developer tools to modify its width in CSS. After changing the width in Edge, the text area does not turn yellow until the viewport is resized. On Chrome and Firefox, it changes colors immediately when changing the width this way.

Here's the version of Edge I'm using:

  • Microsoft Edge 40.15063.674.0
  • Microsoft EdgeHTML 15.15063
yueluog commented

I am seeing the same issue with Safari.
I took a quick look at the code, and see that it uses MutationObserver to detect resize. I read MutationObserver doc. It can detect attribute change. In the Live Demo linked from the home page of this project: http://que-etc.github.io/resize-observer-polyfill, the code specifically updates the styles attribute on the element, so I guess that it triggers MutationObserver.

If the element size changes without any attribute or DOM data change, the doc does not say MutationObserver will be triggered, so I now think that the behavior on Safari is expected. (In fact, I am surprised that it works on Firefox). I am now not sure there is a fix possible in the current design. (The polyfill code also listens for window resize event, so that's why resizing window will trigger it.)

yueluog commented

I did a bit more experiment. On Chrome and Firefox, if I change the size of a textarea element by dragging, MutationObserver reports that "style" attribute on the element changes. But Safari does not report anything. I don't know what exactly the spec says, but it feels that Safari's behavior is correct since nothing changed in the DOM tree.

VicXXX commented

It doesn't look that the polyfill works in Safari at all for me. Tested in safari 11. Though I get similar issues with IntersectionObserver polyfills on Safari too. Ugh ... Safari... hate that thing.

karlcow commented

This is working for me in STP 184