css.at-rules.media.-webkit-transform-3d - <Preserve-3D does not work on newest Safari browser>

[siggah]

What type of issue is this?

Incorrect support data (example: Chrome says "86" but support was added in "40")

What information was incorrect, unhelpful, or incomplete?

Data support for Safari was added in 4 but current version is now 16. Using the transformStyle: preserve-3D with a pseudo :before element with the transform: translateZ(-1px) does not work in the newest version of Safari. The element that is supposed to stay behind it's parent is now on top. It does work in Chrome, Firefox and used to work in the previous Safari versions.

What browsers does this problem apply to, if applicable?

Safari

What did you expect to see?

Did not expect to see changes in the stacking order of the elements.

Did you test this? If so, how?

My project is currently using this method (transformStyle: preserve-3D with a pseudo :before element with the transform: translateZ(-1px)) to render an svg "shadow" behind it's parent. It used to work beautifully in all browsers but with the newest version of Safari it broke and the svg "shadow" is not stacked on top of it's parent.

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

No response

Do you have anything more you want to share?

No response

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-transform-3d

MDN metadata

MDN page report details

* Query: `css.at-rules.media.-webkit-transform-3d` * Report started: 2023-04-24T15:42:19.794Z

[matej-marcisovsky]

https://bugs.webkit.org/show_bug.cgi?id=256430

[siggah]

sorry for my late response @matej-marcisovsky, but this is still an issue i have a demo here https://codepen.io/siggah/pen/Jjwdqmq if you open this up in Chrome the ::before pseudo element stays behind the "box" but in Safari that does not seem to be the case

using Safari Version 16.4