CSS flip-animation not working in Safari

问题

Based on this excellent blogpost I implemented a flip-animation on a page of a web-application I am working on. At first I used the CSS-classes as presented in the top of the blogpost but unfortunately this doesn't work in IE10 so I started using the CSS-class that was proposed as a solution to get it working in IE10 presented at the end of the blogpost.

I simplified the example tremendously for this post but my code looks like this

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Welcome!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="flipper.css" rel="stylesheet">
    <script src="js/jquery-1.11.2.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="flip-container" id="flipFrame">
    <div class="flipper">
        <div class="front">
            FRONT CONTENT
            <br>
            <button onclick="flipFrame()">
                Start <b>here</b>
            </button>
        </div>
        <div class="back">
            BACK CONTENT
        </div>
    </div>
</div>
</body>
 <script>
function flipFrame(){
    document.querySelector("#flipFrame").classList.toggle("hover")
}
</script>

CSS:

/* entire container, keeps perspective */
.flip-container {
    perspective: 1000;
    transform-style: preserve-3d;
}
/*  UPDATED! flip the pane when hovered */
.flip-container.hover .back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);    
}
.flip-container.hover .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);       
}

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
}

/*  UPDATED! front pane, placed above back */
.front {
    z-index: 2;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);    
}

/* back, initially hidden pane */
.back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);  
}

This code works perfectly in Chrome and in Edge. On IE10 it works but there is no flip-animation. It just switches the front-div with the back-div without flipping but that's still OK. In Safari (on Mac OS X and iPhone), however, it is not working correctly. Both of the divs are constantly visible next to each other (with the back-div being mirrored)

Does anyone know how I can get this functionality to work in IE10 as well as in Safari on Mac OS X and iPhone?

The code snippet can be found and executed here: https://jsfiddle.net/jrwx3L2e/1/

回答1:

You need to prefix backface-visibility for Safari according to Can I use, even for the newest version 9.1 at the time of writing.

-webkit-backface-visibility: hidden;
backface-visibility: hidden;

Updated Example

document.getElementById("myBtn").addEventListener("click", function() {
  document.querySelector("#flipFrame").classList.toggle("hover")
});

/* entire container, keeps perspective */

.flip-container {
  -webkit-perspective: 1000;
  perspective: 1000;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

/*  UPDATED! flip the pane when hovered */

.flip-container.hover .back {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

.flip-container.hover .front {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flip-container,
.front,
.back {
  width: 320px;
  height: 480px;
}

/* flip speed goes here */

.flipper {
  -webkit-transition: 0.6s;
  transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
}

/* hide back of pane during swap */

.front,
.back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  left: 0;
}

/*  UPDATED! front pane, placed above back */

.front {
  z-index: 2;
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

/* back, initially hidden pane */

.back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

<div class="flip-container" id="flipFrame">
  <div class="flipper">
    <div class="front">
      FRONT CONTENT
      <br>
      <button id="myBtn" onclick="flipFrame()">
        Start <b>here</b>
      </button>
    </div>
    <div class="back">
      BACK CONTENT
    </div>
  </div>
</div>

来源：https://stackoverflow.com/questions/34834349/css-flip-animation-not-working-in-safari

标签

html

css

cross-browser