Chrome: element vanishes when using filter: brightness in column-layout

Question

Today I've stumbled across a rather strange behaviour in google chrome (version 62.0.3202.94). It occurs when an element inside a column-layout is styled using filter. To be more specific: only when the element is not inside the first column. Here we go:

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

As you can see, when hovering Button1 on the left side, it gets darker just as expected. But when hovering Button2 on the rigth side, it vanishes (becomes invisible). When working with column-width and resizing the window, so that the left column breaks under the right column, the hover effect on Button2 works as expected as well. All that also happens with other filter settings, eg. blur.

Two workarounds I found are:

• Using background: hsla(0,0%,0%,0.25);
  • this is not supported in all browsers
  • when used on a different background color, it just shines through because of the transparency
• Hack it via transform: translateZ(0); which triggers hardware acceleration
  • can be overwritten by later stylings

My questions are:

1. Why does that happen?
2. How do I make filter work normally for other columns than the first?

Thank you very much in advance!