V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Danswerme
V2EX  ›  问与答

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

  •  
  •   Danswerme · 2020-08-09 15:48:16 +08:00 · 1458 次点击
    这是一个创建于 1327 天前的主题,其中的信息可能已经有所发展或是发生改变。

    操作系统: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>
    
    3 条回复    2020-08-10 10:16:35 +08:00
    Pyrex23
        1
    Pyrex23  
       2020-08-09 16:50:03 +08:00 via iPhone   ❤️ 1
    之前也遇到了类似的问题 不过我用的是 translate 查了一下 网上说是数值是小数的问题
    wxsm
        2
    wxsm  
       2020-08-09 18:35:46 +08:00 via iPhone   ❤️ 1
    调试器坑很多,以真机为准
    jiemowang
        3
    jiemowang  
       2020-08-10 10:16:35 +08:00
    画面传输问题,问了节省带宽,把不重要的部分压缩传输了,真机上应该是清晰的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3331 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 13:27 · PVG 21:27 · LAX 06:27 · JFK 09:27
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.