rotateX() rotateY() - unstable on version 13 to 15 (current) - workaround exits

What information was incorrect, unhelpful, or incomplete?

rotateX() and rotateY() is not well supported in Safari version 13 to 15. (current) It has a regression bug. (I also sent a bug report to the Safari Team)

What did you expect to see?

I would expect to see a note in rotateX() rotateY() in Safari and Safari on iOS mentioning the workaround fix.

Did you test this? If so, how?

Tests: https://bafkreicfarv4knb6lpaauvodb7f5tpfjfz2s5uyl4254rud2u7ihyndl5y.ipfs.dweb.link/
mirror: https://ipfs.io/ipfs/bafkreicfarv4knb6lpaauvodb7f5tpfjfz2s5uyl4254rud2u7ihyndl5y
mirror2: https://pastebin.com/4snr8UrM

I added tilt.js to a customer website and it had bugged out in his iPad. As I don't own any Apple device, I had to use browserstack to debug it. It turns out that if there is a single element {position: sticky; z-index: -1;} in the page, it somewhat creates a conflict with the rotateX() rotateY(). The way I found to fix it is by adding -webkit-transform: translateZ(0) to the rotated object parent.

Someone else got a similar problem, but somewhat different on StackOverFlow: https://stackoverflow.com/questions/18146511/bug-in-css3-rotatey-transition-on-safari
I don't have the patience to debug that problem, but the solution to that was the same. (-webkit-transform: translateZ(0))
Seeing their problem doesn't have a position: sticky object, it makes me think there are many things that could trigger the bug.

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

I think this bug could be related to #6637

Start with the rotateX() and rotateY() compatibility entries in the browser compatibility data and inspect how Safari and Safari on iOS notes are represented. Add the reported workaround note if it fits the project’s data format, then run the relevant data validation checks to confirm the entries are valid.