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;

Answer 2

我有一个非常相似的问题，我的旋转导致我的前“卡片”进入iOS 12 Safari中其祖父母div的背景之下。对我来说，解决方法是使用transform3d hack在卡的父div上创建块格式化上下文。

我的结构：

<div class="hasBackground">
    <div class="bfcHack">
        <div class="card">

        </div>
    </div>
</div>

// Create BFC because mobile safari 12 is broken
.bfcHack {
    z-index: 1;
    transform: translate3d(0, 0, 0);
}