3

我正在为手机开发一个网络应用程序。该应用程序由多个滑动面板（水平）组成，每个面板上都有可点击的元素。我正在使用 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) 触发一次硬件加速，但问题仍然存在。

任何见解将不胜感激！

4

1 回答 1

0

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

于 2012-09-23T01:16:39.643 回答