在css过渡的web应用程序上闪烁黑色方块

Question

我正在开发一款适用于手机的网络应用。该应用程序由多个滑动面板（水平）组成，每个面板上都有可点击的元素。我正在使用touchstart，touchmove，touchend事件捕获触摸事件，并使用“-webkit-transform：translate3d”来实际移动元素（使用Brad Birdsall的swipe.js进行水平滑动 - https://github.com/bradbirdsall/Swipe）。我还在前面板上添加了一个淡入淡出的幻灯片。使用css动画的图像可以滑动和淡入淡出：

@-webkit-keyframes slideLeft{
    0% {
        -webkit-transform: translate3d(0px, 0px, 0px);
        opacity:0;
    }
    30%{
        -webkit-transform: translate3d(-60px, 0px, 0px);
        opacity:1;
    }
    70%{
        -webkit-transform: translate3d(-140px, 0px, 0px);
        opacity:1;
    }
    100% {
        -webkit-transform: translate3d(-200px, 0px, 0px);
        opacity:0;
    }
}

.slideLeft{
    -webkit-animation: slideLeft 10000ms linear;
    -moz-animation: slideLeft 10000ms linear;
    -o-animation: slideLeft 10000ms linear;
    animation: slideLeft 10000ms linear;
}

添加了几个这样的效果后，应用程序现在无法正确加载超过50％的时间。随着浏览器加载，屏幕上的不同位置会出现随机黑色矩形闪烁（有关示例，请参阅附带的屏幕截图）。有时它们会闪烁几秒然后消失，但有时它们会继续移动，导致所有动画变得非常缓慢和抖动。

以下是我所看到的示例截图。广场继续在屏幕上移动：

这个问题实际上只发生在三星Galaxy android手机上，在默认的android浏览器上（chrome工作得很好，但我需要它在默认浏览器中工作）。一切都在iphone上完美运行，并且对我到目前为止所测试的所有其他机器人都可以正常工作。而在三星 - 偶尔一切都正确加载，但大部分时间它没有。我试图摆脱一些动画，但问题是如此不一致。如果我在不更改代码的情况下保持刷新，我肯定会在某些时候看到它。

以前有人有这个问题吗？我制作了应用程序的简化版本，只有2个滑动面板和前面板上的幻灯片。代码在github上： https://github.com/mashabelyi/css-transitions-test。您可以通过手机访问www.webitap.com/test

上的应用

在这个简化版本中，黑色矩形的出现频率较低，这让我觉得它与正在加载的内容量有关。有时它们出现在开头，然后消失。 我正在对元素进行大量的javascript DOM操作，以确保应用程序适合任何屏幕大小。这可能是问题的潜在原因吗？ 我尝试使用translateX而不是translate3d并通过调用translate3d（0,0,0）触发硬件加速一次，但问题仍然存在。

非常感谢任何见解！

Answer 1

我解决了这个问题！结果我使用的图像太大了。我压缩了图像，现在一切都很好。