缩放 + 不透明度导致模糊和其他变化

Question

我遇到了一个问题，即在修改 <div> 的不透明度（或任何过滤器）时缩放 <div> 会导致对 <div> 及其内容进行不必要的更改。

查看此示例（在 Chrome 中测试）：

div {
  width: 100px;
  height: 50px;
  margin: 20px;
  border: 1px solid black;
  text-align: center;
  /* filter: invert(0); */
  transform: scale(1.16491);
}

div:hover  {
  transition: opacity 0.4s;
  transition-delay: 0.75s;
  opacity: 0.5;
}

<html>
  <body>
    <div>
      Hover Over Me
    </div>
  </body>
</html>

请注意，当不透明度（一种滤镜）应用于 <div> 时，它的边框如何变得模糊。当我使用过滤器属性添加另一个过滤器时，问题变得更加复杂。然后，内容也变得模糊（取消注释 filter: invert(0); 可以看到）。添加 translateZ(0) 可能会在此示例中有所帮助，但在我的实际用例中没有帮助（不知道为什么）。

感谢任何解决此问题的帮助。

Answer 1

经过大量调查后，我发现将比例四舍五入为小数点后以偶数结尾的两位数字解决了我的用例的问题。但是，它没有解决问题中的示例，但可以通过添加 translateZ(0).

来解决

我希望在这两个解决方案之间可以解决所有用例。

缩放 + 不透明度导致模糊和其他变化

Scale + Opacity causes blur and other changes

html

css

google-chrome

blink

css-selectors