Bug 248655 - Contain paint breaks perspective
Summary: Contain paint breaks perspective
Status: RESOLVED INVALID
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari Technology Preview
Hardware: Mac (Apple Silicon) Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2022-12-02 03:49 PST by Johannes Odland
Modified: 2023-01-25 22:31 PST (History)
6 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
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.