Bug 248655

Summary: Contain paint breaks perspective
Product: WebKit Reporter: Johannes Odland <johannes.odland>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: RESOLVED INVALID    
Severity: Normal CC: bfulgham, mattwoodrow, rbuis, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari Technology Preview   
Hardware: Mac (Apple Silicon)   
OS: Unspecified   

Description Johannes Odland 2022-12-02 03:49:27 PST 
Similar to resolved Firefox issue: https://bugzilla.mozilla.org/show_bug.cgi?id=1681452

Steps to reproduce:

Set perspective to an outer element.
Add a background and content to an inner wrapper element.
Translate the background in the z-axis.
Set contain: paint to the inner element.

https://codepen.io/johannesodland/pen/WNGGxjd

Actual results:

Rendering of perspective breaks.

Expected results:

The content should render as it was without "contain: paint" (It should not break).
Content overflowing the wrapper element should not be rendered.

Perspective rendering in Chrome and Firefox does not break on "contain: paint".
Comment 1 Radar WebKit Bug Importer 2022-12-02 09:55:49 PST 
<rdar://problem/102908897>
Comment 2 Matt Woodrow 2023-01-25 15:33:21 PST 
`contain:paint` is specified to explicitly force the used value of `transform-style` to flat - https://drafts.csswg.org/css-transforms-2/#grouping-property-values

I'm not sure what the other two browsers are doing here, but it seems like WebKit is implementing the spec correctly here.
Comment 3 Johannes Odland 2023-01-25 22:31:09 PST 
You're right, sorry for filing.
I'm closing the issue.