Bug 244139

Summary: position: sticky element is not always re-painted on DOM update
Product: WebKit Reporter: patrick
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: bfulgham, malcolmkiano, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 15   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
Video showing the bug
none
Non-working reduction
none
Working reduction none

patrick
Reported 2022-08-19 13:42:54 PDT
Created attachment 461737 [details] Video showing the bug Distilled Reproduction Case: https://codepen.io/patrick-mcdougle/pen/QWmYMNz
Attachments
Video showing the bug (29.69 MB, video/quicktime)
2022-08-19 13:42 PDT, patrick 		no flags
Details
Non-working reduction (1.34 KB, text/html)
2022-08-19 15:59 PDT, Simon Fraser (smfr) 		no flags
Details
Working reduction (1.23 KB, text/html)
2022-08-19 17:11 PDT, malcolm 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1 2022-08-19 14:21:27 PDT
Thank you for the report and the clear reproduction. I can reproduce the bug.
Simon Fraser (smfr)
Comment 2 2022-08-19 15:57:26 PDT
My attempt to build a testcase without using React does not reproduce the bug.
Simon Fraser (smfr)
Comment 3 2022-08-19 15:59:09 PDT
Created attachment 461742 [details] Non-working reduction
patrick
Comment 4 2022-08-19 16:56:17 PDT
A colleague of mine created a non-react repro case...I'm working on getting it from him. Might have to wait until Monday.
malcolm
Comment 5 2022-08-19 17:02:33 PDT
I was able to reproduce this with vanilla JS https://replit.com/@kshncodes/fixed-sticky-repaint-bug#index.html
malcolm
Comment 6 2022-08-19 17:11:12 PDT
Created attachment 461745 [details] Working reduction I've attached a working reduction of the issue with vanilla js
Simon Fraser (smfr)
Comment 7 2022-08-19 21:40:30 PDT
We're computing a bad repaint rect, because the layoutDelta is moving the rect to a negative Y offset: (lldb) p view().frameView().layoutContext().layoutDelta() (WebCore::LayoutSize) $0 = { width = 0px (0), height = -57.6875px (-3692) } (lldb) p dirtyRect (WebCore::LayoutRect) $1 = { x = 0px (0), y = -47.6875px (-3052), width = 192px (12288), height = 28px (1792) }
Radar WebKit Bug Importer
Comment 8 2022-08-26 13:43:58 PDT
<rdar://problem/99201177>
patrick
Comment 9 2025-09-19 09:19:47 PDT
How can we get some traction on this? Not re-painting dirty rects that are visible on screen isn't a very good UX.
Note You need to log in before you can comment on or make changes to this bug.