Bug 260281 - REGRESSION - rotateX() + rotateY() breaks when paired with translate or opacity
Summary: REGRESSION - rotateX() + rotateY() breaks when paired with translate or opacity
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 16
Hardware: All Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-08-16 12:19 PDT by kevin
Modified: 2023-08-20 18:36 PDT (History)
4 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description kevin 2023-08-16 12:19:57 PDT
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
Comment 1 Ahmad Saleem 2023-08-16 14:06:06 PDT
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.
Comment 2 Radar WebKit Bug Importer 2023-08-16 18:00:34 PDT
<rdar://problem/113998933>