Bug 238016

Summary: Interop issue with position: sticky within contain: paint
Product: WebKit Reporter: Klaus Meinhardt <klaus.meinhardt1>
Component: CSSAssignee: Rob Buis <rbuis>
Status: RESOLVED FIXED    
Severity: Normal CC: bfulgham, cathiechen, changseok, clopez, danilu, esprehn+autocc, ews-watchlist, fred.wang, glenn, klaus.meinhardt1, kondapallykalyan, mrobinson, pdr, rbuis, simon.fraser, webkit-bug-importer, youennf
Priority: P2 Keywords: InRadar
Version: Safari 15   
Hardware: iPhone / iPad   
OS: iOS 15   
URL: https://jsfiddle.net/rh2oe9js/8/
See Also: https://github.com/web-platform-tests/wpt/pull/33426
Attachments:
Description Flags
Patch
none
Patch
none
Patch none

Klaus Meinhardt
Reported 2022-03-17 03:14:11 PDT
Reproduces on iPad 15.4. Didn't check macOS. https://jsfiddle.net/rh2oe9js/8/ <div style="height: 300px; overflow: auto"> <div style="height: 600px; contain: paint"> <div style="position: sticky; top: 0; height: 50px; background-color: yellow"> </div> </div> </div> Expected: While scrolling, the yellow sticky div should stick to the top of the scroll container. This is the behavior in all other major browsers. Actual: Element is not sticky. Removing the "contain: paint" from the parent element makes it sticky again.
Attachments
Patch (1.37 KB, patch)
2022-03-30 06:11 PDT, Rob Buis 		no flags
DetailsFormatted DiffDiff
Patch (4.15 KB, patch)
2022-03-30 10:00 PDT, Rob Buis 		no flags
DetailsFormatted DiffDiff
Patch (6.46 KB, patch)
2022-03-30 10:36 PDT, Rob Buis 		no flags
DetailsFormatted DiffDiff
Show Obsolete (2) View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2022-03-21 09:25:53 PDT
<rdar://problem/90572543>
Rob Buis
Comment 2 2022-03-30 06:11:50 PDT
Created attachment 456115 [details] Patch
Rob Buis
Comment 3 2022-03-30 10:00:08 PDT
Created attachment 456135 [details] Patch
Simon Fraser (smfr)
Comment 4 2022-03-30 10:01:18 PDT
Comment on attachment 456135 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=456135&action=review > LayoutTests/ChangeLog:9 > + * fast/css/sticky/sticky-overflow-clip-container-expected.html: Added. > + * fast/css/sticky/sticky-overflow-clip-container.html: Added. Can this be a WPT?
Rob Buis
Comment 5 2022-03-30 10:36:34 PDT
Created attachment 456143 [details] Patch
EWS Watchlist
Comment 6 2022-03-30 10:38:11 PDT
This patch modifies the imported WPT tests. Please ensure that any changes on the tests (not coming from a WPT import) are exported to WPT. Please see https://trac.webkit.org/wiki/WPTExportProcess
Rob Buis
Comment 7 2022-03-30 10:56:29 PDT
Comment on attachment 456135 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=456135&action=review >> LayoutTests/ChangeLog:9 >> + * fast/css/sticky/sticky-overflow-clip-container.html: Added. > > Can this be a WPT? Sure, patch updated and I did a manual export here: https://github.com/web-platform-tests/wpt/pull/33426.
EWS
Comment 8 2022-03-31 04:54:50 PDT
Committed r292155 (249062@main): <https://commits.webkit.org/249062@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 456143 [details].
Simon Fraser (smfr)
Comment 9 2022-04-14 19:29:06 PDT
*** Bug 239357 has been marked as a duplicate of this bug. ***
Brent Fulgham
Comment 10 2022-05-26 14:50:59 PDT
This fix shipped with Safari 15.5 (all platforms).
Note You need to log in before you can comment on or make changes to this bug.