Bug in CSS3 Rotatey Transition on Safari

Bug in CSS3 rotateY transition on Safari?

As far as I can tell it's a bug, yes, Safari is rendering intersection where it shouldn't.

For some time I thought Safari is doing it right by always rendering intersection of elements, but as far as I understand the specs, only elements in the same 3d rendering context should intersect, and that would be children of elements with a transform-style of preserve-3d.

So far the only workaround I found (only tested on Windows yet where Safari shows the same behaviour) is to translate the underlying elements away on the z-axis. Without perspective being applied it won't actually translate, but Safari/Webkit seems to think it does (which probably is because it mistakenly treats the element as if it were in the same 3d rendering context as the actually transformed dialog) and so the elements do no longer intersect.

.effeckt-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.5);

    -webkit-transform: translateZ(-1000px);
}

http://jsfiddle.net/eJsZx/5/

Transform: rotate doesn't work in Safari

Working in Safari 10.1.1, I am given the error that I must use the -webkit- prefix for backface-visibility. You can see this in the browser's console, when you inspect an element (right-click inspect). There is a little yellow triangle with an exclamation point next to it next to backface-visibility that explains the problem.

.box-front, .box-back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

Making that adjustment makes it work for me.

.box {  width: 155px;  height: 125px;  position: relative;  display: inline-block;  padding: 5px;  line-height: 20px;}
.box-in {  width: 100%;  height: 100%;  position: absolute;  transition: all .5s;}
.box-front {  background-color: transparent;  z-index: 1;  -webkit-backface-visibility: hidden;  backface-visibility: hidden;}
.box-back {  background-color: #F5F5F5;  -ms-transform: rotateY(180deg);  -webkit-transform: rotateY(180deg);  -moz-transform: rotateY(180deg);  -o-transform: rotateY(180deg);  transform: rotateY(180deg);  z-index: 1;  -webkit-backface-visibility: hidden;  backface-visibility: hidden;  line-height: 30px;}
.box:hover .box-front {  -ms-transform: rotateY(180deg);  -webkit-transform: rotateY(180deg);  -moz-transform: rotateY(180deg);  -o-transform: rotateY(180deg);  transform: rotateY(180deg);}
.box:hover .box-back {  -ms-transform: rotateY(0deg);  -webkit-transform: rotateY(0deg);  -moz-transform: rotateY(0deg);  -o-transform: rotateY(0deg);  transform: rotateY(0deg);}

<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">  <div class="box">    <div class="box-in box-front">      <div>jQuery</div> <br>      <div>Bootstrap</div> <br>      <div>RWD</div>    </div>    <div class="box-in box-back">level: <br> </div>  </div></div><div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">  <div class="box">    <div class="box-in box-front">      <div>SASS</div> <br>      <div>GULP</div> <br>      <div>JavaScript</div>    </div>    <div class="box-in box-back">level: <br> </div>  </div></div><div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">  <div class="box">    <div class="box-in box-front">      <div>AJAX</div> <br>      <div>WordPress</div> <br>      <div>JSON</div>    </div>    <div class="box-in box-back">level: <br> </div>  </div></div>

Safari rendering bug with CSS transform - a depth sorting / z-index problem? (works in Chrome)

The way to work around the lack of z-index support is to avoid having the planes intersect by displacing them on the z-axis.

since we are animating the transform property and we need that property for doing the z-axis displacement we can change the animation to the img element instead of the li element, and do the displacement on the li.

here's a working example:
https://codepen.io/ptcc/pen/qBqyqEj?editors=0100

the changes are basically these:

move the perspective from the ul to each li

li {
    perspective: 900px;

move the animation to the img and set a translateZ on the li based on the index.

for $i in 0 .. $lines {
  li:nth-child({$i}) {
      transform: translateZ($i*100px);
  img{
      animation-delay: (($duration * $i)) - $duration s;
    }
  }
}

CSS3 Transition + Transform not working in Safari, but working in Chrome

Vendor prefix has to be at property not at value, so:

-o-transform: scale(1,1);

Bug in CSS3 Rotatey Transition on Safari