Twitter feed contents overlap when changing the zoom level (caused by ResizeObserver)

• Component: DOM
• Status: RESOLVED FIXED

[Simon Fraser (smfr)]

Load https://twitter.com/explore. Zoom out with Command--. Note how elements on the timeline now overlap.

Does not happen in Chrome.

[Simon Fraser (smfr)]

The feed is a series of absolutely positioned boxes, offset with translateY() transforms. Those offsets are computing using ResizeObserver.

ResizeObserver doesn't seem to fire callbacks when the zoom level changes, so those translateY() don't change. They do in Chrome.

[Simon Fraser (smfr)]

Created attachment 395339 [details]
Screenshot

[Simon Fraser (smfr)]

It's also possible that the sizes being reported by ResizeObserver fail to take zoom into account.

[Simon Fraser (smfr)]

That might be similar to bug 209264.

[cathiechen]

Created attachment 395457 [details]
Patch

[Simon Fraser (smfr)]

Comment on attachment 395457 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=395457&action=review

> Source/WebCore/ChangeLog:8
> +        Zoom in/out shouldn't affect ResizeObserver. Use adjustLayoutUnitForAbsoluteZoom instead.

Is the bug that its was triggering resizeObserver? Does Command-+ zooming affect getBoundingClientRect results?

> LayoutTests/imported/w3c/ChangeLog:9
> +        * web-platform-tests/resize-observer/resize-observer-with-zoom-expected.txt: Added.
> +        * web-platform-tests/resize-observer/resize-observer-with-zoom.html: Added.

New WPT tests should go into http/wpt so they get upstreamed.

> LayoutTests/imported/w3c/web-platform-tests/resize-observer/resize-observer-with-zoom.html:35
> +                    window.internals.setPageZoomFactor(2);

I don't think a WPT test can use window.internals.setPageZoomFactor

[cathiechen]

Comment on attachment 395457 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=395457&action=review

Hi Simon,
Thanks for the review:)

>> Source/WebCore/ChangeLog:8
>> +        Zoom in/out shouldn't affect ResizeObserver. Use adjustLayoutUnitForAbsoluteZoom instead.
> 
> Is the bug that its was triggering resizeObserver? Does Command-+ zooming affect getBoundingClientRect results?

Ah, it should be "don't affect ResizeObserver size" here. "ResizeObserver size" matters, not triggering notification. Command-+ doesn't affect getBoundingClientRect, and I would add a svg test case for it.

>> LayoutTests/imported/w3c/ChangeLog:9
>> +        * web-platform-tests/resize-observer/resize-observer-with-zoom.html: Added.
> 
> New WPT tests should go into http/wpt so they get upstreamed.

I see, I usually upload the test by github, will try this next time.

>> LayoutTests/imported/w3c/web-platform-tests/resize-observer/resize-observer-with-zoom.html:35
>> +                    window.internals.setPageZoomFactor(2);
> 
> I don't think a WPT test can use window.internals.setPageZoomFactor

Hmm, I can't find a similar interface in WPT, maybe we can move the test to /LayoutTests/resize-observer/resize-observer-with-zoom.html instead?

[cathiechen]

Created attachment 395489 [details]
Patch

[EWS]

Committed r259578: <https://trac.webkit.org/changeset/259578>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 395489 [details].

[Radar WebKit Bug Importer]

<rdar://problem/61349043>

[Simon Fraser (smfr)]

<rdar://problem/59944646>

[Simon Fraser (smfr)]

*** Bug 210432 has been marked as a duplicate of this bug. ***