Safari 5中的所有jquery动画都有问题。我的系统是windows。
我一直在努力使用基本的图像淡入淡出滑块,但仍然有一点点闪烁。使用此图像滑块,我可以点击事件,在页面上同时移动2页,活动页面向右移动,非活动页面向左移动。
我可以在此处找到我使用的脚本:fiddle
相关部分是我更改类以使用css3动画来移动元素,但以前使用过相同最终结果的jquery。
$('.page.inactive').addClass('moveRight').find('#blurWall').addClass('moveLeftBlur');
$('.page.active').addClass('moveLeft').find('#blurWall').addClass('moveRightBlur');
这些添加的类包含以下样式:
.moveRight
{
-webkit-animation-name: moveRight;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes moveRight
{
from { left:-1286px; }
to { left:107px; }
}
.moveLeft
{
-webkit-animation-name: moveLeft;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes moveLeft
{
from { left:107px; }
to { left:-1286px; }
}
该网站位于:fiddle
所有图片都已最小化以供网络使用。以上链接只是为了查看效果。在Chrome中完美运行。
任何想法如何摆脱滞后?
答案 0 :(得分:1)
使用jQuery或CSS动画显示差别的原因是因为jQuery与CSS完全相同:它使用左/右定位移动东西,这不是非常有效,因为它不是硬件加速,并且在你的示例(非常图像很重,并且背景位置不断变化 - 滑块事物)它会对FPS造成伤害。
解决方案:
使动画使用变换而非强制硬件加速:
@-webkit-keyframes moveRight {
from {
-webkit-transform: translate3d(-1286px, 0,0);
}
to {
-webkit-transform: translate3d(107px, 0,0);
}
}
@-webkit-keyframes moveLeft {
from {
-webkit-transform: translate3d(107px, 0,0);
}
to {
-webkit-transform: translate3d(-1286px, 0,0);
}
}
它会显着增加FPS - 我在你的页面上做了一些基准测试,比较左/右vs翻译:
它的峰值低于30fps的正确版本有时当然是左/右定位。变换方法有一些低于30fps但可能是你页面上发生的所有其他事情 - 比如自动滚动和图像滑块等。