除非放大，否则 Chrome 中的 CSS 动画会断断续续答案

【问题标题】：CSS animations in Chrome choppy unless zoomed in除非放大，否则 Chrome 中的 CSS 动画会断断续续
【发布时间】：2014-11-27 11:50:17
【问题描述】：

我正在开发一个网站项目，其中包含多个使用 CSS（有时是 jQuery）动画的元素。但是，对于包含大型视觉效果的元素，动画通常会滞后并且看起来不太好。示例是淡入/淡出的大图像或调整包含 Google 地图的 div 的大小。包含文本或其他内容的更简单的元素可以正常工作。

但是，当我将页面缩放到 100% 以外的任何值（进出）时，动画看起来非常流畅。如果我再回到 100%，动画有时看起来很流畅，有时又开始滞后。

在其他浏览器（在 IE 和 FF 中测试）中，动画在任何缩放级别（包括 100%）下看起来都很好。

这只是我必须接受的 Chrome 错误/问题，还是我可以做些什么来改进它？请记住，大图像动画是绝对必要的。

编辑，代码示例：

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%（取决于纵横比）的图片。

【问题讨论】：

你能复制 Fiddle 演示中的行为吗？我不能说我以前见过它......
如果无法在 JS Fiddle 中复制，网站是否可以实时查看？
我似乎无法在 JS Fiddle 中复制它。可能是因为结果是在该站点上的 iframe 中呈现的，而不是在整个页面上。我目前也无法公开该网站。但是，我可以在我的问题中粘贴一些示例代码来重现效果。

标签： jquery css google-chrome animation

【解决方案1】：

这可能无法修复您的特定错误，但另一种可能有帮助的方法是利用高性能 CSS 动画，在 GPU 和 CPU 上执行动画。更具体地说，基于 javascript 的动画被发现性能较差，因为您被绑定到 JS 的单计算线程并且无法访问 GPU。幸运的是，CSS 可以提供帮助。

我强烈建议您查看this article on high performance browser animations，并可能将您的动画代码改为使用 CSS。只需将包含动画的 CSS 类添加到受影响的节点即可实现您想要的相同效果。

你也可以在CSS动画完成后执行一些JS逻辑by utilizing the "transitionend" event。

【讨论】：