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

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).