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>