javascript - 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

原来是定位让它消失了。所以我所做的就是将卡片包装在一个容器 div 中，并将固定位置放在上面。工作起来很有魅力。

容器 CSS:

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