238016 – Interop issue with position: sticky within contain: paint

RESOLVED FIXED 238016

Interop issue with position: sticky within contain: paint

https://bugs.webkit.org/show_bug.cgi?id=238016

Summary Interop issue with position: sticky within contain: paint

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	Details Formatted Diff Diff
Patch (4.15 KB, patch) 2022-03-30 10:00 PDT, Rob Buis	no flags	Details Formatted Diff Diff
Patch (6.46 KB, patch) 2022-03-30 10:36 PDT, Rob Buis	no flags	Details Formatted Diff Diff
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.