Bug 248655
| Summary: | Contain paint breaks perspective | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Johannes Odland <johannes.odland> |
| Component: | Layout and Rendering | Assignee: | 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 | ||
Johannes Odland
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".
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/102908897>
Matt Woodrow
`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.
Johannes Odland
You're right, sorry for filing.
I'm closing the issue.