Bug 244139 - position: sticky element is not always re-painted on DOM update
Summary: position: sticky element is not always re-painted on DOM update
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 15
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-08-19 13:42 PDT by patrick
Modified: 2022-08-26 13:43 PDT (History)
5 users (show)

See Also:


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

Note You need to log in before you can comment on or make changes to this bug.
Description patrick 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
Comment 1 Simon Fraser (smfr) 2022-08-19 14:21:27 PDT
Thank you for the report and the clear reproduction. I can reproduce the bug.
Comment 2 Simon Fraser (smfr) 2022-08-19 15:57:26 PDT
My attempt to build a testcase without using React does not reproduce the bug.
Comment 3 Simon Fraser (smfr) 2022-08-19 15:59:09 PDT
Created attachment 461742 [details]
Non-working reduction
Comment 4 patrick 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.
Comment 5 malcolm 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
Comment 6 malcolm 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
Comment 7 Simon Fraser (smfr) 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) }
Comment 8 Radar WebKit Bug Importer 2022-08-26 13:43:58 PDT
<rdar://problem/99201177>