Bug 238016 - Interop issue with position: sticky within contain: paint
Summary: Interop issue with position: sticky within contain: paint
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 15
Hardware: iPhone / iPad iOS 15
: P2 Normal
Assignee: Rob Buis
URL: https://jsfiddle.net/rh2oe9js/8/
Keywords: InRadar
: 239357 (view as bug list)
Depends on:
Blocks:
 
Reported: 2022-03-17 03:14 PDT by Klaus Meinhardt
Modified: 2022-05-26 14:50 PDT (History)
17 users (show)

See Also:

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 an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Klaus Meinhardt 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.
Comment 1 Radar WebKit Bug Importer 2022-03-21 09:25:53 PDT 
<rdar://problem/90572543>
Comment 2 Rob Buis 2022-03-30 06:11:50 PDT 
Created attachment 456115 [details]
Patch
Comment 3 Rob Buis 2022-03-30 10:00:08 PDT 
Created attachment 456135 [details]
Patch
Comment 4 Simon Fraser (smfr) 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?
Comment 5 Rob Buis 2022-03-30 10:36:34 PDT 
Created attachment 456143 [details]
Patch
Comment 6 EWS Watchlist 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
Comment 7 Rob Buis 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.
Comment 8 EWS 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].
Comment 9 Simon Fraser (smfr) 2022-04-14 19:29:06 PDT 
*** Bug 239357 has been marked as a duplicate of this bug. ***
Comment 10 Brent Fulgham 2022-05-26 14:50:59 PDT 
This fix shipped with Safari 15.5 (all platforms).