Question

我有一个我已经构建的网络应用程序，它使用CSS3模糊带有背景图像的元素，同时在圆形路径中设置动画。

大约5-10天前（我无法及时记住）谷歌浏览器已更新，现在这种组合（模糊加动画）仅在Chrome网络检查器打开时才会产生闪烁效果。

要了解我正在谈论的内容，请在当前版本的Chrome中查看以下简化演示jsfiddle：

然后，打开Web检查器并重新加载，您将看到闪烁。关闭检查员并闪烁停止。

这是我的代码的问题吗？或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开始，这不再是一个问题。如果有人来这里遇到类似的事情，请打开一个新问题。

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

1 个答案: