Safari transform z-index bug workaround

If you have trouble with your z-index using the transform property, you should try to set transform: translate3d(0,0,0) translateZ(1000px) on the element what should overlay the other element(s).

But be careful, this fucks up all your z-indexes, you have to add translateZ(xxxx) to all elements who should overlay your overlaying element. If you have some position: fixed elements inside your overlaying element, they will fail as well (you must move it outside any container on which you have applied the translateZ property).


// (Animated) element behind the page
  transform: perspective(200px) rotateX(26deg);
  animation: whatever 1s;
  // ...
// Page wrapper in front of the element
  // The part that should work in all major browsers - except safari:
  // The Safari fix:
  transform: translate3d(0,0,0) translateZ(1000px);

2 Antworten auf “Safari transform z-index bug workaround”

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

The reCAPTCHA verification period has expired. Please reload the page.