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).

Example:

// (Animated) element behind the page
.background-animation-element{
  position:absolute;
  left:50%;
  top:100px;
  z-index:1;
  transform: perspective(200px) rotateX(26deg);
  animation: whatever 1s;
  // ...
}
// Page wrapper in front of the element
.page-wrapper{
  // The part that should work in all major browsers - except safari:
  position:relative;
  z-index:50;
  // The Safari fix:
  transform: translate3d(0,0,0) translateZ(1000px);
}

• stackoverflow.com Kit Sunde