新的 Chrome Web Inspector 打开导致模糊和动画元素闪烁

Question

我有一个我构建的网络应用程序，它使用 CSS3 来模糊一个带有背景图像的元素，同时在圆形路径中对其进行动画处理。

大约 5 到 10 天前（我不记得确切的时间）Google Chrome 更新了，现在这种组合（模糊加动画）仅在 Chrome 网络检查器打开时才会产生闪烁效果。

要了解我在说什么，请查看当前 Chrome 版本中的以下简化演示 jsfiddle：

http://jsfiddle.net/jaredh159/qqchW/1/

然后，打开网络检查器并重新加载，您会看到闪烁。关闭inspector，闪烁停止。

这是我的代码有问题吗？还是 Chrome 中的错误？有解决方法吗？有没有人有任何见解？ Safari 的网页检查器不会导致同样的闪烁。

这是 CSS 和 HTML：

<style>
    @-webkit-keyframes bgOrbit {
    from { -webkit-transform: rotate(0deg) translateX(50px) rotate(0deg); }
    to   { -webkit-transform: rotate(360deg) translateX(50px) rotate(-360deg); }
    }

    div.wrap {
        position: absolute;
        width: 300px;
       height: 300px;
   }

    .img {
        background-image: url(http://www.prophoto.com/jsfiddle/thumb.jpg);
    position: absolute;
        width: 120%;
        height: 120%;
        top: 80px;
        left: 80px;
        background-repeat: no-repeat;
        -webkit-filter: blur(3px);
        -webkit-animation: 3s bgOrbit linear infinite;
    }
</style>

<div class="wrap">
    <div class="img"></div>
</div>

Answer 1

从 Chrome 55 开始，这不再是问题。如果有人来这里遇到类似的事情，请打开一个新问题。