Transform: rotate doesn't work in Safari

Question

I want to create a flipbox which rotate from front to back - on the front side there is a text and also on the back side.The problem is that even though it rotates, both texts from front and back side are visible together when the box rotates. And the text from the back side is visible at first instead the text from the front side. Maybe someone has an idea why? Everything is working without problems in Chrome.

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

HTML code:

            <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>
        </div>

Solution

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>

Comments

[Admin]

thanks a lot!!! it's working now. i haven't thought that i also should use the prefix with visibility.

[cjl750]

Great! Glad to help. Go ahead and check the answer as accepted if you're good to go, please.

[yeyimilk]

It is really helpful