gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 23:31:01 25 4
gpt4 key购买 nike

我正在为手机开发一个网络应用程序。该应用程序由多个滑动面板(水平)组成,每个面板上都有可点击的元素。我正在使用 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 在屏幕上不断移动:

enter image description here enter image description here

这个问题实际上只发生在三星 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) 触发一次硬件加速,但问题仍然存在。

任何见解将不胜感激!

最佳答案

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

关于css - 带有 CSS 转换的 Web 应用程序上闪烁的黑色方 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12540180/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com