[前端]为什么 css3 动画中使用了任意 transform 之后，页面上其他使用了定位的元素会变模糊?

[Danswerme]

操作系统：win10

Chrome: 84.0.4147.105

用 Chrome 调试移动端网页时会出现如下情况，但是真机上没有此问题，Firefox 也无此问题，仅在 chrome 调试移动端网页时会出现这种情况。

当页面上某个元素使用了任意包含 transform 的动画后，页面上其他使用了任意定位的元素就会变模糊；即使动画并无发生(例如 0%和 100%都使用相同的值)，元素仍然也会变模糊。

相关代码如下:

@keyframes avatar_rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}
.avatar {
    animation: avatar_rotate 66s linear infinite;
    width: 44px;
    height: 44px;
}
.text {
    position: relative;
}


<div class="wrap">
    <img src="https://cdn.v2ex.com/avatar/7460/e1cd/274090_large.png" class="avatar">
    <p class="text">测试文字测试文字测试文字</p>  
</div>

[Pyrex23]

之前也遇到了类似的问题 不过我用的是 translate 查了一下 网上说是数值是小数的问题

[wxsm]

调试器坑很多，以真机为准

[jiemowang]

画面传输问题,问了节省带宽,把不重要的部分压缩传输了,真机上应该是清晰的