Safari 5中的Jquery和css3动画滞后

时间:2014-01-31 07:44:40

标签: jquery css3 animation safari lag

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中完美运行。

任何想法如何摆脱滞后?

1 个答案:

答案 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翻译:

Left/margin vs Translate

它的峰值低于30fps的正确版本有时当然是左/右定位。变换方法有一些低于30fps但可能是你页面上发生的所有其他事情 - 比如自动滚动和图像滑块等。