Bug 260281
| Summary: | REGRESSION - rotateX() + rotateY() breaks when paired with translate or opacity | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | kevin |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | ahmad.saleem792, graouts, karlcow, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 16 | ||
| Hardware: | All | ||
| OS: | Unspecified | ||
kevin
If an element has a `transform: rotateX()` or `rotateY()` with more than 180deg (or .5turn) of rotation and either an opacity or translate, the transition or animation does not work in Safari 16.5 -> TP. It works as expected if the rotation is less than 180deg. It is the same regardless of whether it is a `transition` or `animation`.
If using `translate` and `transform`, the `transform` will not work, but the `translate` will still work.
If using `opacity` and `transform`, opacity will always stop working, and if the `rotateX()` or `rotateY()` is greater than 180deg, both will stop working.
All scenarios work as expected in Chrome, Firefox, and Safari 14.1 -> 15.6.
This codepen has examples: https://codepen.io/kevinpowell/pen/GRPKQvO
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Ahmad Saleem
I am able to reproduce the broken behavior in WebKit ToT (266957@main) as well, where there is no 'flip' in 'red' box while transitioning.
Radar WebKit Bug Importer
<rdar://problem/113998933>