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 - 我在您的页面上做了一个小基准测试，比较左/右与平移：

有时峰值低于 30fps 的正确版本当然是左/右定位。 transform 方法的帧率低于 30fps，但很可能是页面上发生的所有其他事情——比如自动滚动和图像滑块。