如何在使用 css 转换（转换 or/and 比例）和浮点值时修复 "border around a border" 错误？

Question

我在尝试对带边框的 div 元素使用带浮点参数的 css 转换时遇到此错误（请参阅 bug/expected image）。它看起来像“边框周围的边框”，这个额外的边框与元素背景具有相同的颜色。该错误显然与浏览器如何处理浮点值有关，因为当我只使用 transform: translate(10px, 10px) 时，一切正常。一件有趣的事情，一些浮点数参数工作正常，但其他的则不行。

我尝试了各种资源的不同建议，例如与模糊边界或浮动值错误相关的建议，但不幸的是，没有任何效果。这是我尝试过的事情列表：

添加will-change: transform到元素
backface-visibility: hidden
-webkit-filter: blur(0px)
-webkit-font-smoothing: antialised
仅使用 odd/even 个数字进行翻译

可能的解决方法：

添加border-radius: 1px（没想到）
移除边框 + 换一个更大的边框 div + 居中

重现代码（在转换中尝试不同的浮点参数）：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <style>
    .item {
      transform: scale(1.07);
      background-color: red;
      border: 10px solid white;
      width: 50px;
      height: 50px;
    }
  </style>
  <body>
    <div class="container">
      <div class="item"></div>
    </div>
  </body>
</html>

Link to codesandbox

Answer 1

这似乎是浏览器中的渲染错误。最好的解决方案（假设这个问题没有其他限制）是在 .item CSS 块中添加 background-clip: content-box;。

这会将元素的背景剪切到元素的内容框，而不是其边框，这实际上意味着背景不会呈现在元素的边框下方，因此很可能不会溢出子像素渲染的边框。

如何在使用 css 转换（转换 or/and 比例）和浮点值时修复 "border around a border" 错误？

How to fix "border around a border" bug while using css transform (translate or/and scale) and values with floating points?

html

css

transform

border