html - CSS flip-animation not working in Safari -


based on this excellent blogpost implemented flip-animation on page of web-application working on. @ first used css-classes presented in top of blogpost unfortunately doesn't work in ie10 started using css-class proposed solution working in ie10 presented @ end of blogpost.

i simplified example tremendously post code looks 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">             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 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 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 */ .front {     z-index: 2;     -webkit-transform: rotatey(0deg);     -moz-transform: rotatey(0deg);     -ms-transform: rotatey(0deg);     transform: rotatey(0deg);     }  /* back, hidden pane */ .back {     -webkit-transform: rotatey(180deg);     -moz-transform: rotatey(180deg);     -ms-transform: rotatey(180deg);     transform: rotatey(180deg);   }

this code works in chrome , in edge. on ie10 works there no flip-animation. switches front-div back-div without flipping that's still ok. in safari (on mac os x , iphone), however, not working correctly. both of divs visible next each other (with back-div being mirrored)

does know how can functionality work in ie10 in safari on mac os x , iphone?

the code snippet can found , executed here: https://jsfiddle.net/jrwx3l2e/1/

you need prefix backface-visibility safari according can use, newest version 9.1 @ 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 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 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 */    .front {    z-index: 2;    -webkit-transform: rotatey(0deg);    transform: rotatey(0deg);  }    /* back, 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">        content      </div>    </div>  </div>


Comments

Post a Comment

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

Image
i have page in each contest shown in row. each row contains contest id , link other model names have foreign key contest. news model: class news(models.model): title = models.charfield(max_length=50, null=true) description = models.textfield() time = models.timefield( default= datetime.datetime.now().time()) contest = models.foreignkey(contest) i want use admin adding , changing these models. want when user clicks on 'news' has foreign key contest id=1, shows list of news value foreign key. use {% instance in instances %} <tr class="{% cycle 'row1' 'row2' %}"> <td>{{ instance.title }}</td> <td>{{ instance.starttime }}</td> <td>{{ instance.timespan }}</td> <td>{{ instance.date }}</td> <td><a href="/adm...
Read more

android - Keyboard hides my half of edit-text and button below it even in scroll view -

i having trouble keyboard covers edit-text , half of button in scroll view. here's layout , please tell me how should resolve problem. many questions on topic none of them s working me. <?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:background="@drawable/bg" android:layout_height="match_parent"> <scrollview android:layout_width="match_parent" android:fillviewport="true" android:layout_height="match_parent"> <relativelayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <linearlayout android:layout_width="match_parent" android:layout_height="w...
Read more

css - Make div keyboard-scrollable in jQuery Mobile? -

from can tell, although jquery-mobile-powered pages can contain divs overflow set scroll or auto, , these divs can scrolled one-screen bar or mouse wheel, cannot scrolled using arrow keys, page-up/page-down, or home/end. instead, official "page" div (with data-role="page") absorbs input. perhaps other divs can't acquire focus, i'm not sure. is there way around this? edit: jsfiddle of simple example: https://jsfiddle.net/qogz0shx/ <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"> </script> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"/> <style> #outer { overflow:scroll; height: 50vh; width: 50vw; } #inner { height: 500vh; width: 500vw; } ...
Read more