@media (-webkit-transform-3d) is a funny thing that exists on the web.

It’s like, a media query feature in the form of a prefixed CSS property, which should tell you if your (once upon a time probably Safari-only) browser supports 3D transforms, invented back in the day before we had @supports.

(According to Apple docs it first appeared in Safari 4, along side the other -webkit-transition and -webkit-transform-2d hybrid-media-query-feature-prefixed-css-properties-things that you should immediately forget exist.)

Older versions of Modernizr used this (and only this) to detect support for 3D transforms, and that seemed pretty OK. (They also did the polite thing and tested @media (transform-3d), but no browser has ever actually supported that, as it turns out). And because they’re so consistently polite, they’ve since updated the test to prefer @supports too (via a pull request from Edge developer Jacob Rossi).

As it turns out other browsers have been updated to support 3D CSS transforms, but sites didn’t go back and update their version of Modernizr. So unless you support @media (-webkit-transform-3d) these sites break. Niche websites like yahoo.com and about.com.

So, anyways. I added @media (-webkit-transform-3d) to the Compat Standard and we added support for it Firefox so websites stop breaking.

But you shouldn’t ever use it—use @supports. In fact, don’t even share this blog post. Maybe delete it from your browser history just in case.