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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 1652 天前的主题，其中的信息可能已经有所发展或是发生改变。

下面是在 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>

3 条回复 • 2020-06-15 18:06:04 +08:00

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，如今已修复。哭唧唧