Почему этот псевдоэлемент не активируется в Google Chrome?

Question

Сегодня я столкнулся с проблемой, которая касается только Google Chrome.Я не замечал этого раньше при разработке и тестировании функции несколько месяцев назад, поэтому думаю, что это может быть новая ошибка.

В приведенном ниже коде нажатие на синее поле не активирует флажок.Если метка имеет отображаемое значение inline-block и / или поля удалены, это работает.Почему?

label {
  margin-left: 30px;
}

input+label:before {
  content: " ";
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid blue;
  margin-left: -30px;
  margin-right: 20px;
  vertical-align: middle;
}

input:checked+label:before {
  content: 'X';
}

input {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

<input type="checkbox" id="a">
<label for="a">Label text</label>

Редактировать: Я использую Google Chrome версии 73.0.3683.86 (официальная сборка) (64-разрядная версия).

Был задан связанный вопросв 2011 году и был видимо баг.Однако сейчас 2019 год, и до недавнего времени он работал.