Bug 160886 - Incorrect clipping of fixed elements inside element with opacity, position, mix-blend-mode or filter
Summary: Incorrect clipping of fixed elements inside element with opacity, position, m...
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 9
Hardware: Mac OS X 10.10
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2016-08-15 18:04 PDT by valdrinkoshi
Modified: 2022-07-14 16:35 PDT (History)
5 users (show)

See Also:

Attachments
actual rendering (14.71 KB, image/png)
2016-08-15 18:04 PDT, valdrinkoshi 		no flags Details
Picture of the bug on chrome(left, how it should look like) and on safari (right, with bug) (641.41 KB, image/png)
2017-05-30 08:43 PDT, sofia.pohjalainen 		no flags Details
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 valdrinkoshi 2016-08-15 18:04:39 PDT 
Created attachment 286127 [details]
actual rendering

opacity, position, mix-blend-mode, filter should only create a new stacking context for its fixed descendants, and not create a containing block. Instead, in Safari this gets created, causing cropping of the fixed descendants
http://jsbin.com/coxoye/2/edit?html,output
Comment 1 Simon Fraser (smfr) 2016-08-17 22:02:44 PDT 
This is a compositing bug.
Comment 2 sofia.pohjalainen 2017-05-30 08:43:11 PDT 
Created attachment 311507 [details]
Picture of the bug on chrome(left, how it should look like) and on safari (right, with bug)
Comment 3 sofia.pohjalainen 2017-05-30 08:45:50 PDT 
I was having this bug too. Tested on iOS 10.3 (safari, iPad).

Link to demo: https://codepen.io/sofiapoh/pen/xdozJL
Comment 4 L. David Baron 2018-05-31 21:26:03 PDT 
Per the spec, *filter* should create a containing block for fixed-pos descendants; see my comment at https://bugs.chromium.org/p/chromium/issues/detail?id=797493#c6 .

That said, based on my test at https://dbaron.org/css/test/2018/stacking-context-z-order WebKit isn't creating a containing block for fixed descendants for any of these properties (perhaps comment 1 was indicating that comment 0's statement is too general?).
Comment 5 Brent Fulgham 2022-07-14 16:35:21 PDT 
We don't see an issue with this test case. If you believe there is still an issue, could you please REOPEN this bug with a small test case illustrating the issue?