Safari 5中的Jquery和css3动画滞后

Question

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

任何想法如何摆脱滞后？

Answer 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但可能是你页面上发生的所有其他事情 - 比如自动滚动和图像滑块等。