CSS transformation not working correctly on Safari

I'm developing a website using Bootstrap 3, and I needed to create a transformation of a box which makes it flip horizontally. In Chrome and Firefox, this animation seems to work correctly, here's the output in Chrome, version 51.0.2704.103 (64-bit), which is what I was expecting:

CSS transformation not working correctly on Safari

and this is the result in Safari Version 9.1.1:

CSS transformation not working correctly on Safari

Note that there are at least 2 problems:

  1. Sometimes, for some reason, one or two white horizontal bars appear at the border of the box below the one on which the animation is happening.
  2. The box is not flipping correctly, i.e. it seems to cut in half the box...

This is the HTML code for creating the grid of boxes:

<div class="row" data-checks-url="/checks" id="uptime-checks-panel">      {% for check in checks %}      <div class="col-xs-12 col-md-6 col-lg-4" id="{{ 'check_' ~ check.id }}">          <div class="panel text-center flip">              <div class="panel-body panel-front">                  <div class="panel-heading">                     <h1 class="panel-title"> website name </h1>                 </div>                  <i {% if check.status=='up' %} class="fa fa-thumbs-up fa-5x thumbs-up" {% else %} class="fa fa-thumbs-down fa-5x thumbs-down" {% endif %} id="{{ check.id ~ '_status'}}">                        </i>             </div>              <div class="panel-body panel-back">                  <ul class="list-group">                                         <li class="list-group-item">                         <a target="_blank" href="{{ check.hostname | external_link }}"> link name </a>                     </li>                           <li class="list-group-item">last response in {{ check.lastresponsetime }} milliseconds </li>                     <li class="list-group-item">last error {{ check.lasterrortime | pretty_timestamp }} ago</li>                 </ul>              </div>          </div>      </div>      {% endfor %}  </div> 

And this is the CSS code related to the HTML code above (which includes of course the code for the animation). I removed the -webkit-, -moz-, -o- and -ms- prefixes from the transform and `` properties to make the code more readable, but the code works in the same way, anyway:

/* style for the boxes containing info about the websites */  .thumbs-up {     color: #a4ec9d; }  .thumbs-down {     color: #ff5756; }  .flip {     position: relative; }  .flip h1, .flip li, .flip p {     color: #e1e4e6; }  .flip a {     text-decoration: none;     font-style: italic;     color: #cce4ff; }  .flip a:hover {     color: #badaff; }  .panel-front {     background-color: #55595c;     border: none; }  .panel-back {     background-color: #494d50;     border: none;     color: #e3e6e8; }  .panel-front * {     background-color: #55595c;     border: none; }  .panel-back * {     background-color: #494d50;     border: none; }  .panel-front {     transform: perspective(800px) rotateY(0deg);     backface-visibility: hidden;     transition: transform .5s linear 0s; }  .panel-front h1 {     margin-top: 5px; }   /* size of the thumbs */  .panel-front i {     padding: 35px; }  .panel-back {     position: absolute;     top: 0;     min-width: 100%;     min-height: 100%;     transform: perspective(800px) rotateY(180deg);     backface-visibility: hidden;     transition: transform .5s linear 0s;     text-align: center;     display: flex;     align-items: center; }  .panel-back * {     position: relative; }  .flip:hover > .panel-front {     transform: perspective(800px) rotateY(-180deg); }  .flip:hover > .panel-back {     transform: perspective(800px) rotateY(0deg); }  .panel-back .list-group {     min-width: 100%;     margin-top: 16px; } 

Why the animation is working awkwardly in Safari (but not on Chrome and Firefox)?

I really need to make this transition work correctly in all major browsers...


Category: css Time: 2016-07-29 Views: 0

Related post

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development


Front-end development


development tools

Open Platform

Javascript development

.NET development

cloud computing


Copyright (C) avrocks.com, All Rights Reserved.

processed in 0.438 (s). 12 q(s)