css - 带有 CSS 转换的 Web 应用程序上闪烁的黑色方 block

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% 的时间无法正确加载。当浏览器加载时，屏幕上的不同位置会随机闪烁黑色矩形(有关示例，请参见随附的屏幕截图)。有时它们会闪烁几秒钟然后消失，但有时它们会继续移动，导致所有动画变得非常缓慢和抖动。

以下是我所看到的示例屏幕截图。方 block 在屏幕上不断移动:

这个问题实际上只发生在三星 galaxy android 手机上，在默认的 android 浏览器上(chrome 工作得很好，但我需要它在默认浏览器中工作)。一切都在 iphone 上完美运行，并且在我目前测试过的所有其他机器人上运行良好。在 samsung 上 - 偶尔一切都能正确加载，但大多数时候都没有。我尝试摆脱一些动画，但问题是如此不一致。如果我一直刷新而不更改代码，我一定会在某个时候看到它。

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

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

任何见解将不胜感激!

Answer 1

我解决了这个问题!原来我使用的图像太大了。我压缩了图像，现在一切正常。