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;