Bug 204120 – Rendering artifacts when scrolling overlays

• Status: RESOLVED
• Resolution: FIXED
• Component: Compositing

[Jason Grigsby]

We've noticed a rendering issue on Decathlon.com on this page in an overlay:
https://www.decathlon.com/products/soccer-ball-hybrid-size-5-f100?adept-product=soccer-ball-hybrid-size-5-f100&variant=35881848717&adept_product_id=soccer-ball-hybrid-size-5-f100&source=search

When scrolling in overlays, white bars obscure portions of the UI. I've recorded two videos.

This documents the behavior:
https://www.youtube.com/watch?v=OhlIsJCeWAE

This video documents a compositing issue that is caused by a script that Shopify is adding to the page. I'm not sure if it is related or not, but I wanted to highlight it so you know that this is happening as well (and that I'm trying to get Shopify to fix it).
https://youtu.be/l9nurb5mvVU

I tested on an iOS 12 device and could not replicate the artifacts so I _think_ this was introduced with iOS 13.

[Simon Fraser (smfr)]

Created attachment 383363 [details]
Screenshot from the video

[Radar WebKit Bug Importer]

<rdar://problem/57121358>

[Simon Fraser (smfr)]

The stars are popping into compositing layers when scrolling (probably because they overlap something further back in z-order), and when they drop out of layers, they don't always repaint correctly.

[Simon Fraser (smfr)]

I suspect the repaint rects are offset a bit because of the scrolling.

[Simon Fraser (smfr)]

Workaround: add "will-change: transform;" to .de-StarRating-fill.

[Simon Fraser (smfr)]

Created attachment 400295 [details]
Reduction

[Simon Fraser (smfr)]

I think the bug is that RenderLayerBacking::setContentsNeedDisplayInRect() offsets the repaint rect by m_scrolledContentsLayer->scrollOffset(), but that might be ahead of the scroll position used to compute the repaint rect.

[Simon Fraser (smfr)]

We repaint during RenderLayerCompositor::computeCompositingRequirements() when we haven't updated the GraphicsLayer scrollOffset yet, so we're one step behind.

[Simon Fraser (smfr)]

Created attachment 400306 [details]
Patch

[EWS]

Committed r262177: <https://trac.webkit.org/changeset/262177>

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