发现一个 chrome83(chromiun85 中也存在)的 bug，在 chrome83 中启用调试，使用 zoom 属性，会导致绝对定位与预期不一致。

2020-06-15 17:27:59 +08:00
 xoyimi

下面是在 Chrome83 中的表现 https://i.loli.net/2020/06/15/r8P14oGEFQRCHbX.png

下面是在 Chromium85 中的表现 https://i.loli.net/2020/06/15/AtKjT3QeUwkVcD4.png

下面是在 QQ 浏览器 PC 中的表现 https://i.loli.net/2020/06/15/wM3LBEdWbz8mgKq.png

下面是在微信开发者工具中的表现 https://i.loli.net/2020/06/15/93gy6vK28zUh14l.png

下面是在微信 v7.0.15 浏览器中的表现 https://i.loli.net/2020/06/15/kEq3T4HbK8xwuMm.jpg

下面是源代码 index.html

<!DOCTYPE html>
<html lang="zh-CH">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html{
        font-size: 20px;
      }
      .wrapper{
        position: relative;
        height: 200px;
        width: 200px;
        background-color: pink;
      }
      .inner{
        zoom: .5;
    position: absolute;
    left: 10rem;
    width: 1rem;
        height: 1rem;
        background-color: purple;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="inner">
      </div>
    </div>
  </body>
</html>
1379 次点击
所在节点    程序员
3 条回复
xoyimi
2020-06-15 17:35:19 +08:00
似乎在移动端和某些浏览器（ qq 浏览器基于 chrome70 ）,zoom 属性不生效？
xoyimi
2020-06-15 17:49:11 +08:00
@xoyimi 继续测试，zoom 和 rem 一起使用 zoom 在部分浏览器下会失效。
xoyimi
2020-06-15 18:06:04 +08:00
将移动版 chrome 升级到 83 之后，浏览器表现和 PC 版一致，初步判断，这是在低版本 chrome 中的一个 bug，如今已修复。哭唧唧

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/681761

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX