Question

我有一个使用javascript并在浏览器中运行的应用程序。此应用程序有一个屏幕保护程序，它是从屏幕顶部向下滑动然后逐渐淡出的图像。

这对Chrome和Safari工作正常但在我更新了Ipad Mini上的IOS之后我用于测试9.1屏幕保护程序的行为很奇怪。

当我打开页面时，屏幕保护程序未显示。在我将browsertab切换到另一个并返回后，动画工作正常。

我写了一个简单的HTML页面，它使用相同的代码来查看我的应用程序的任何其他部分是否可能导致问题，但它似乎是-webkit-animation。

HTML代码是：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="image"></div>
</body>
</html>

，CSS代码是：

#image {
    position: absolute;
    top: 60%;
    width: 100%;
    height: 100%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    margin: auto;
    -webkit-animation-name: animateBg;
    -webkit-animation-duration: 15s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: forward;
    background: url('screensaver.jpg') no-repeat;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes animateBg {
        from {
            -webkit-transform: translateY(-250%);
            transform: translateY(-250%);
            opacity: 1;
            filter: alpha(opacity=100);
        }

        15% {
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            opacity: 1;
            filter: alpha(opacity=100);
        }

        85% {
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            opacity: 1;
            filter: alpha(opacity=100);
        }

        to {
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            opacity: 0;
            filter: alpha(opacity=0);
        }
    }

之前是否有人遇到此问题并知道如何修复它？

- UPDATE-- 经过一些测试后，我发现了一些额外的细节：

1：如果我使用红色背景的div元素，动画效果很好。所以它必须与图像有关。

2：如果我在主屏幕上创建一个链接并从全屏运行应用程序，那么动画效果也很好。只有当我使用带有标签的Safari浏览器时才会出现问题。

IOS更新后-webkit-transformation无法正常工作

0 个答案: