Bug 204120

Summary: Rendering artifacts when scrolling overlays
Product: WebKit Reporter: Jason Grigsby <jason>
Component: CompositingAssignee: Simon Fraser (smfr) <simon.fraser>
Status: RESOLVED FIXED    
Severity: Normal CC: bfulgham, changseok, esprehn+autocc, ews-watchlist, fred.wang, glenn, kondapallykalyan, pdr, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=209526
Attachments:
Description Flags
Screenshot from the video
none
Reduction
none
Patch none

Jason Grigsby
Reported 2019-11-12 10:04:31 PST
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.
Attachments
Screenshot from the video (502.12 KB, image/png)
2019-11-12 10:32 PST, Simon Fraser (smfr) 		no flags
Details
Reduction (1.79 KB, text/html)
2020-05-26 19:07 PDT, Simon Fraser (smfr) 		no flags
Details
Patch (11.83 KB, patch)
2020-05-26 20:56 PDT, Simon Fraser (smfr) 		no flags
DetailsFormatted DiffDiff
View All Add attachment proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1 2019-11-12 10:32:12 PST
Created attachment 383363 [details] Screenshot from the video
Radar WebKit Bug Importer
Comment 2 2019-11-12 10:32:25 PST
<rdar://problem/57121358>
Simon Fraser (smfr)
Comment 3 2020-03-23 14:34:10 PDT
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)
Comment 4 2020-03-23 14:37:03 PDT
I suspect the repaint rects are offset a bit because of the scrolling.
Simon Fraser (smfr)
Comment 5 2020-03-23 14:38:26 PDT
Workaround: add "will-change: transform;" to .de-StarRating-fill.
Simon Fraser (smfr)
Comment 6 2020-05-26 19:07:46 PDT
Created attachment 400295 [details] Reduction
Simon Fraser (smfr)
Comment 7 2020-05-26 20:03:43 PDT
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)
Comment 8 2020-05-26 20:06:50 PDT
We repaint during RenderLayerCompositor::computeCompositingRequirements() when we haven't updated the GraphicsLayer scrollOffset yet, so we're one step behind.
Simon Fraser (smfr)
Comment 9 2020-05-26 20:56:14 PDT
Created attachment 400306 [details] Patch
EWS
Comment 10 2020-05-26 22:10:24 PDT
Committed r262177: <https://trac.webkit.org/changeset/262177> All reviewed patches have been landed. Closing bug and clearing flags on attachment 400306 [details].
Note You need to log in before you can comment on or make changes to this bug.