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

Question

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

问题：您知道任何可以帮助解决此问题的方便的css属性吗？

编辑：这是一个放大的屏幕截图

Answer 1

经过一些实验后，我发现了一种解决方法，即将transform: translateZ(0);添加到具有不透明度的元素中。我不确切知道为什么会有效，但我认为这与Chrome处理动画的方式有关，并且transform Chrome会假设动画。

＆＃13;

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;