Chrome动荡的CSS动画，除非放大

我正在开发一个网站项目，其中包含多个使用CSS（有时是jQuery）动画的元素。但是，对于包含大量视觉元素的元素，动画往往滞后，看起来不太好。示例是大图像淡入/淡出或重新调整包含Google地图的div的大小。包含文本或更好的东西的更简单的元素工作正常然而，当我将页面缩放到除100％以外的所有内容（无论是输入还是输出）时，动画看起来都非常平滑。如果我回到100％，动画有时会看起来平滑，有时会再次滞后。Chrome动荡的CSS动画，除非放大

在其他浏览器（在IE和FF中测试）中，任何缩放级别（包括100％）的动画效果都不错。

这只是一个我不得不接受的Chrome bug /问题，还是我能做些什么来改进它？请记住，大图像动画是绝对必要的。

编辑，代码例如：

JS：

function pictureOverlay(url) 
{ 
    var body = $('body'); 
    var overlay = $('<div class="overlay"></div>'); 
    body.append(overlay); 
    overlay.append('<img class="picture-overlay" src="' + url + '"></img>'); 
    overlay.hide().fadeIn(400); 
    overlay.on('click', function() { 
     $(this).fadeOut(400, function() { 
      $(this).remove(); 
     }); 
    }); 
}

CSS：

.overlay { 
    position: fixed; 
    display: block; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    z-index: 200; 
    vertical-align: middle; 

    cursor: pointer; 
    background-color: rgba(0, 0, 0, 0.75); 
} 
.picture-overlay { 
    position: absolute; 
    display: block; 
    max-height: 90%; 
    max-width: 90%; 
    top: 50%; 
    left: 50%; 
    margin-right: -50%; 
    transform: translate(-50%, -50%); 

    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.75); 
}

这显示与该填满整个屏幕和淡入了黑色透明的背景上的图像叠加/出。覆盖图包含一个调整大小以适应屏幕宽度或高度的90％（取决于宽高比）的图片。

来源

2014-10-02 Wouter Florijn

您可以在小提琴的演示中复制行为吗？我不能说我以前见过它...... – kmoe 2014-10-02 13:17:07

如果你不能在JS小提琴中复制它，网站是否可以观看？ – Kitson 2014-10-02 13:28:11

我似乎无法复制它在JS小提琴。可能是因为结果呈现在该网站的iframe中，而不是整个页面上。我目前无法将网站公开。然而，我可以在我的问题中粘贴一些示例代码，以再现效果。 – 2014-10-02 16:38:17

这可能无法解决您的特定问题，但另一种可能有用的方法是利用高性能的CSS动画来执行GPU和CPU之间的动画。更具体地说，基于JavaScript的动画被发现性能较差，因为你绑定到JS的单线程计算和无法访问GPU。幸运的是，CSS可以提供帮助。

我强烈建议您查看this article on high performance browser animations，并且可能会将您的动画代码移至使用CSS代替。只需将包含动画的CSS类添加到受影响的节点即可达到所需的效果。

当CSS动画完成时，您也可以执行一些JS逻辑by utilizing the "transitionend" event。

来源

2014-10-02 16:51:01 linusthe3rd

Chrome动荡的CSS动画，除非放大

回答

相关问题