Bug 239357 - Element with "position: sticky" doesn't stick if parent element has "contain: paint"
Summary: Element with "position: sticky" doesn't stick if parent element has "contain:...
Status: RESOLVED DUPLICATE of bug 238016
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 15
Hardware: Mac (Intel) macOS 12
: P2 Minor
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2022-04-14 15:43 PDT by Daniel Lu
Modified: 2022-04-14 19:29 PDT (History)
1 user (show)

See Also:

Attachments
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 Daniel Lu 2022-04-14 15:43:53 PDT 
Reproduction Steps:
1. Go to https://codepen.io/dl1644/pen/zYpmLpd in Safari 15.4 (macOS 12.3.1)
2. Attempt to scroll the green/yellow/red div to the right
3. Note that the green "sticky" div is scrolled out of view
4. Repeat steps 1 and 2 in Chrome(100) and Firefox (99). Note that the green "sticky" div stays in view
5. Return to your Safari codepen tab and remove "contain: paint" from the "#row" CSS
6. Attempt to scroll the green/yellow/red div. Note that the green "sticky" div stays in view now but the yellow "float" div now spills out the bottom of the red div


Started occurring with Safari 15.4 from what I can tell. Unsure if this counts as a regression since "contains" is newly supported in Safari 15.4 but the sticky behavior worked just fine in at least Safari 14 and below.
Comment 1 Simon Fraser (smfr) 2022-04-14 19:29:06 PDT 

*** This bug has been marked as a duplicate of bug 238016 ***