CSS翻轉卡 - 錯誤在Chrome

Question

我有一個CSS翻轉卡，該卡已被設置爲的jsfiddle這裏：

https://jsfiddle.net/kwudsgfw/

這是工作按預期在Firefox中，MS邊緣，甚至IE ，但是在Chrome（以及基於chrome的瀏覽器，如Opera）中有問題。

在Chrome中，翻轉卡正面的顯示仍然顯示出來，直到用戶將鼠標移出卡片爲止，並且偶爾在將卡片翻轉過正面之後顯示。

我應該提到，翻蓋上的不透明度變化是作爲上一個Chrome瀏覽器問題的解決方案添加的，其中翻蓋卡片前面的Canvas元素未遵守「backface-visibility：hidden」設置。

我在這裏做錯了什麼，或者什麼都沒有，是否有人知道工作？

爲完整的小提琴代碼的緣故低於：

HTML

<div class="widget " style="height: 300px;"> 
    <div class="flipper"> 
    <div class="front anim"> 
     <div style="width: 90%; margin: auto; position:relative;"> 
     <div style="text-align: center; width: 100%;"> 
      <h1>Front</h1> 
      <p> 
      Lorem Ipsum and all that jaz 
      </p> 
     </div> 
     </div> 
    </div> 
    <div class="back anim"> 
     <div style="height: 299px; width: 100%; margin: auto;"> 
     <div style="text-align: center; width: 100%;"> 
      <h1>Back</h1> 
     </div> 
     <table> 
      <tbody> 
      <tr> 
       <th>Value 1</th> 
       <td>798</td> 
      </tr> 
      <tr> 
       <th>Value 2</th> 
       <td>663</td> 
      </tr> 
      <tr> 
       <th>Value 3</th> 
       <td>493</td> 
      </tr> 
      </tbody> 
     </table> 
     </div> 
    </div> 
    </div> 
</div> 

CSS

.flipper { 
    position: relative; 
} 

.anim { 
    width: 100%; 
    height: 100%; 
    transition: all .5s; 
    backface-visibility: hidden; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 

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

.flipper-click .front { 
    opacity: 0; 
    transform: rotateY(-180deg); 
} 

.flipper-click .back { 
    z-index: 2; 
    transform: rotateY(0deg); 
} 

.widget { 
    width: 300px; 
    height: 0px; 
    overflow: hidden; 
    border: 1px solid white; 
    border-radius: 5px; 
    padding: 3px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 2px; 
    float: none; 
    color: #000; 
    background-color: #aaa; 
} 

.widget:hover { 
    background-color: #999; 
} 

的JavaScript

$(".widget").click(function() { 
    var $flipper = $(this).find(".flipper"); 
    $flipper.toggleClass("flipper-click"); 
}); 

Answer 1

於母公司申請backface-visibility:hidden還有：

https://jsfiddle.net/kwudsgfw/3/