Chrome：不透明对象的边框宽度不一致

Question

当不透明度应用于带边框的对象时，Chrome 似乎不一致地渲染边框。此问题对于 1px 的边框尤其明显，并且当边框位于像素之间时会发生。但是，如果不应用不透明度，Chrome 会始终呈现边框。

.btn {
    margin: 0;
    padding: 12px 24px;
    cursor: pointer;
    font: sans-serif;
    font-size: 14px;
    background-color: transparent;
    color: rgba(0, 0, 0, 0.7);
    border: 1px solid currentColor;
    border-radius: 3px;
}

.opacity {
  opacity: 0.5;
}

<div style="margin-bottom: 4px">
  <button class="btn">button</button>
  <button class="btn">button</button>
  <button class="btn">button</button>
</div>
<div>
  <button class="btn opacity">button</button>
  <button class="btn opacity">button</button>
  <button class="btn opacity">button</button>
</div>

这在一定程度上取决于您的缩放级别等，但您应该能够在第二行按钮中看到不一致的边框宽度。这个问题是 Chrome 特有的，我无法用 Safari 重现它。

问题：你知道有什么方便的css属性可以帮助解决这个问题吗？

编辑： 这是放大的截图

Answer 1

经过一些实验后，我找到了一种解决方法，即向具有不透明度的元素添加 transform: translateZ(0);。我不知道为什么会这样，但我相信这与 Chrome 处理动画的不同方式有关，并且 transform Chrome 假定动画。

.btn {
    margin: 0;
    padding: 12px 24px;
    cursor: pointer;
    font: sans-serif;
    font-size: 14px;
    background-color: transparent;
    color: rgba(0, 0, 0, 0.7);
    border: 1px solid currentColor;
    border-radius: 3px;
}

.opacity {
  opacity: 0.5;
  transform: translateZ(0);
}

<div style="margin-bottom: 4px">
  <button class="btn">button</button>
  <button class="btn">button</button>
  <button class="btn">button</button>
</div>
<div>
  <button class="btn opacity">button</button>
  <button class="btn opacity">button</button>
  <button class="btn opacity">button</button>
</div>

Chrome：不透明对象的边框宽度不一致

Chrome: inconsistent border-width on objects with opacity

css

google-chrome

border