Chrome: элемент исчезает при использовании фильтра: яркость в макете столбца

Question

Сегодня я наткнулся на довольно странное поведение в Google Chrome (версия 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 на правую сторону он исчезает (становится невидимым). При работе с column-width изменив размер окна так, чтобы левый столбец разрывался под правым столбцом, эффект наведения на Button2 также работает, как и ожидалось. Все это также происходит с другими filter настройки, например. blur,

Я нашел два обходных пути:

• С помощью background: hsla(0,0%,0%,0.25);
  • это поддерживается не во всех браузерах
  • при использовании на другом цвете фона он просто просвечивает из-за прозрачности
• Взломать его через transform: translateZ(0); который запускает аппаратное ускорение
  • могут быть перезаписаны более поздними стилями

Мои вопросы:

1. Почему это происходит?
2. Как мне сделать filter нормально работать для других столбцов, чем первый?

Заранее большое спасибо!