jQuery 5和CSS3動畫在Safari 5中滯后

Question

Safari 5中的所有jquery動畫出現問題。我的系統是Windows。

我在使用基本的圖像淡入度滑塊時遇到了麻煩，但是仍然有些閃爍。 使用此圖像滑塊，我可以在整個頁面上同時移動2個頁面的單擊事件，活動頁面向右移動，非活動頁面向左移動。

我使用的腳本可以在這里找到： 小提琴

相關的部分是我更改類以使用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;   }
}

該站點位於： 小提琴

所有圖像均已最小化以供Web使用。 上面的鏈接只是為了查看效果。 在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的右側版本當然是Left / Right位置。 轉換方法的幀率低於30fps，但是很可能是頁面上發生的所有其他事情-例如自動滾動和圖像滑塊事件。