Jquery 除非放大，否则Chrome中的CSS动画会有起伏

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

但是，当我将页面缩放到100%以外的任何位置时（包括向内和向外），动画看起来非常平滑。如果我回到100%，动画有时看起来很平滑，有时又开始延迟

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

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

编辑，代码示例：

JS:

---

这将显示一个带有黑色透明背景的图片覆盖，填充整个屏幕并淡入/淡出。覆盖层包含一个大小调整为适合屏幕宽度或高度90%的图片（取决于纵横比）。

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

我强烈建议您签出并可能将动画代码改为使用CSS。只需将包含动画的CSS类添加到受影响的节点，即可获得所需的效果

---

CSS动画完成后，您还可以执行一些JS逻辑。

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

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();
        });
    });
}

.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);
}