iOS 8 css旋轉元素消失

Question

我想讓css旋轉屬性在iOS 8上工作。基本的想法是，當您向下滾動頁面時，卡片將翻轉。這適用於臺式機和移動iOS 7，但不適用於iOS 8.

我們正在做的是更新rotateY以及用戶滾動的其他屬性。 下面是一些JS代碼：

$(window).scroll(function() { 
     scrollValue = $(this).scrollTop(); 

     if (scrollValue <= section1Top) { 
      scaleValue = 1 - (0.333 * scrollValue/section1Top); 
      rotateyValue = 180 * scrollValue/section1Top; 
      rotateValue = -10 * scrollValue/section1Top; 

      $('#card').css('left', cardLeft + scrollValue * 0.33); 

      if (rotateyValue < 90) { 
        $('#card').css('transform', 'scale(' + scaleValue + ') perspective(1000px) rotateY(' + rotateyValue + 'deg) rotate(' + rotateValue + 'deg)'); 
        $('#card').css('background', 'url(img/card_tyffon.jpg)'); 
      }else { 
        $('#card').css('transform', 'scale(' + scaleValue + ') perspective(1000px) rotateY(' + rotateyValue + 'deg) rotate(' + rotateValue + 'deg) scaleX(-1)'); 
        $('#card').css('background', 'url(img/card_1.jpg)'); 
      } 

     }else if (scrollValue < section2Top - 1100){ 
      $('#card').css('left', cardLeft + section1Top * 0.33); 
      $('#card').css('background', 'url(img/card_1.jpg)'); 
      $('#card').css('transform', 'scale(0.667) perspective(0px) rotateY(0deg) rotate(10deg)'); 
     }else if(scrollValue <= section2Top){ 
      scaleValue = 0.667; 
      rotateyValue = 180 + 360 * (scrollValue - section2Top + 1100)/1100; 
      rotateValue = -10; 

      $('#card').css('left', cardLeft + section1Top * 0.33); 

      if (rotateyValue < 270) { 
       $('#card').css('transform', 'scale(' + scaleValue + ') perspective(1000px) rotateY(' + rotateyValue + 'deg) rotate(' + rotateValue + 'deg) scaleX(-1)'); 
       $('#card').css('background', 'url(img/card_1.jpg)'); 
      }else if (rotateyValue < 450) { 
       $('#card').css('transform', 'scale(' + scaleValue + ') perspective(1000px) rotateY(' + rotateyValue + 'deg) rotate(' + rotateValue + 'deg)'); 
       $('#card').css('background', 'url(img/card_tyffon.jpg)'); 
      }else { 
       $('#card').css('transform', 'scale(' + scaleValue + ') perspective(1000px) rotateY(' + rotateyValue + 'deg) rotate(' + rotateValue + 'deg) scaleX(-1)'); 
       $('#card').css('background', 'url(img/card_2.jpg)'); 
      } 
     }else if (scrollValue < section3Top - 1100){ 
      $('#card').css('left', cardLeft + section1Top * 0.33); 
      $('#card').css('background', 'url(img/card_2.jpg)'); 
      $('#card').css('transform', 'scale(0.667) perspective(0px) rotateY(0deg) rotate(10deg)'); 
     }else if(scrollValue <= section3Top){ 
      scaleValue = 0.667; 
      rotateyValue = 540 + 360 * (scrollValue - section3Top + 1100)/1100; 
      rotateValue = -10; 

      $('#card').css('left', cardLeft + section1Top * 0.33); 

      if (rotateyValue < 630) { 
       $('#card').css('transform', 'scale(' + scaleValue + ') perspective(1000px) rotateY(' + rotateyValue + 'deg) rotate(' + rotateValue + 'deg) scaleX(-1)'); 
       $('#card').css('background', 'url(img/card_2.jpg)'); 
      }else if (rotateyValue < 810) { 
       $('#card').css('transform', 'scale(' + scaleValue + ') perspective(1000px) rotateY(' + rotateyValue + 'deg) rotate(' + rotateValue + 'deg)'); 
       $('#card').css('background', 'url(img/card_tyffon.jpg)'); 
      }else { 
       $('#card').css('transform', 'scale(' + scaleValue + ') perspective(1000px) rotateY(' + rotateyValue + 'deg) rotate(' + rotateValue + 'deg) scaleX(-1)'); 
       $('#card').css('background', 'url(img/card_3.jpg)'); 
      } 
     } else if (scrollValue < section4Top - 1100){ 
      $('#card').css('left', cardLeft + section1Top * 0.33); 
      $('#card').css('background', 'url(img/card_3.jpg)'); 
      $('#card').css('transform', 'scale(0.667) perspective(0px) rotateY(0deg) rotate(10deg)'); 
     } else if(scrollValue <= section4Top){ 
      scaleValue = 0.667; 
      rotateyValue = 900 + 360 * (scrollValue - section4Top + 1100)/1100; 
      rotateValue = -10; 

      $('#card').css('left', cardLeft + section1Top * 0.33); 

      if (rotateyValue < 990) { 
       $('#card').css('transform', 'scale(' + scaleValue + ') perspective(1000px) rotateY(' + rotateyValue + 'deg) rotate(' + rotateValue + 'deg) scaleX(-1)'); 
       $('#card').css('background', 'url(img/card_3.jpg)'); 
      }else if (rotateyValue < 1170) { 
       $('#card').css('transform', 'scale(' + scaleValue + ') perspective(1000px) rotateY(' + rotateyValue + 'deg) rotate(' + rotateValue + 'deg)'); 
       $('#card').css('background', 'url(img/card_tyffon.jpg)'); 
      }else { 
       $('#card').css('transform', 'scale(' + scaleValue + ') perspective(1000px) rotateY(' + rotateyValue + 'deg) rotate(' + rotateValue + 'deg) scaleX(-1)'); 
       $('#card').css('background', 'url(img/card_4.jpg)'); 
      } 
     } else { 
      $('#card').css('left', cardLeft + section1Top * 0.33); 
      $('#card').css('background', 'url(img/card_4.jpg)'); 
      $('#card').css('transform', 'scale(0.667) perspective(0px) rotateY(0deg) rotate(10deg)'); 

     } 

    }); 

和卡上的CSS：

position:fixed; 
top:50%; 
left:50%; 
height: 508px; 
width: 330px; 
margin-top:-254px; 
margin-left:-165px; 

background: url(../img/card_tyffon.jpg) no-repeat; 
background-size: 100%; 

-webkit-transform: scale(1, 1); 
-moz-transform: scale(1, 1); 
-ms-transform: scale(1, 1); 
-o-transform: scale(1, 1); 
transform: scale(1, 1); 

-moz-border-radius: 25px; 
-webkit-border-radius: 25px; 
border-radius: 25px; 
-moz-box-shadow: 0px 0px 24px #000000; 
-webkit-box-shadow: 0px 0px 24px #000000; 
box-shadow: 0px 0px 24px #000000; 
cursor: pointer; 

任何幫助是極大的讚賞，不知道在iOS 8的變化，但它讓我發瘋了。

編輯： 因此，我玩了一會兒，它看起來像在Safari上，卡只顯示rotateY爲0時（卡是平的）。然而，在Chrome上，當我停止滾動時它會顯示旋轉，就像直到結束時纔會應用旋轉一樣。

編輯： 看起來'位置'的設置是什麼導致它消失。

Answer 1

原來這是讓它消失的定位。所以我所做的只是將卡片包裝在一個容器中，並將其固定在其上。像魅力一樣工作。

容器CSS：

position:fixed; 
top:50%; 
left:50%; 
height: 508px; 
width: 330px; 
margin-top:-254px; 
margin-left:-165px; 
-webkit-perspective: 1000px;