使用过滤器时Chrome：元素消失：列布局中的亮度

Question

今天我在谷歌浏览器（版本62.0.3202.94）中偶然发现了一个相当奇怪的行为。当使用filter设置列布局中的元素时，会发生这种情况。更具体一点：仅当元素不在第一列内时。我们走了：

.column-container {
  column-count: 2;
}

input[type="button"]:hover {
  filter: brightness(75%);
}

<div class="column-container">
  <div class="col">
    <input type="button" value="Button1" />
  </div>
  <div class="col">
    <input type="button" value="Button2" />
  </div>
</div>
      

正如您所看到的，当悬停在左侧的Button1时，它会像预期的那样变暗。但是当在Button2上悬停Button2时，它会消失（变得不可见）。使用column-width并调整窗口大小以使左列在右列下方中断时，Button2上的悬停效果也会按预期工作。所有这些都发生在其他filter设置中，例如。 blur。

我找到的两个解决方法是：

• 使用background: hsla(0,0%,0%,0.25);
  • 并非所有浏览器都支持
  • 当用于不同的背景颜色时，由于透明度
  ，它只是闪耀
• 通过transform: translateZ(0);破解它，从而触发硬件加速
  • 可以被后来的样式覆盖

我的问题是：

1. 为什么会这样？
2. 如何让filter正常为其他列工作
？

非常感谢你！