Какова причина этого изменения стиля этикетки сразу после прикосновения, в iOS 13.3.1?

Question

Следующий код представляет три параметра в качестве меток для группы переключателей.

При щелчке по метке должен переходить background-color.

Он работает как положено в Chrome и Safari 13.0.4 в OSX 10.15.2, но в iOS 13.3.1 стиль (метка затемняется) ненадолго применяется к метке сразу после прикосновения.

Почему это может быть? Возможно, ненадолго активируется связанный с касанием псевдокласс, и таблица стилей браузера вызывает появление мерцания.

input[type="radio"] {
  display: none;
}

label {
  font-family: sans-serif;
  padding: 10px;
  margin: 10px;
  display: block;
  cursor: pointer;
  border-radius: 5px;
}

input[type="radio"]+label {
  background-color: rgba(0,220,220,0);
  transition: background-color 1.5s ease-in 0s;
}

input[type="radio"]:checked+label {
  background-color: rgba(0,220,220,1);
}

#time {
  width: 100%;
  font-family: sans-serif;
  font-size: 2em;
  text-align: center;
}

<input type="radio" name="group1" id="london" checked>
<label for="london">London</label>
<input type="radio" name="group1" id="amsterdam">
<label for="amsterdam">Amsterdam</label>
<input type="radio" name="group1" id="new-york">
<label for="new-york">New York</label>
<div id="time"></div>

Answer 1

Попробуйте следующее по порядку и посмотрите, какой из них вам подходит:

1.

label { -webkit-tap-highlight-color: rgba(0,0,0,0); }

2.

input[type="radio"]+label {
      background-color: rgba(0,220,220,0);
      transition: background-color 1.5s ease-in;
      transition: opacity 1.5s ease-in;
}

3.

input[type="radio"]+label {
      background-color: rgba(0,220,220,0);
      transition: all 1.5s ease-in;
}

4.

input[type="radio"]+label {
      background-color: rgba(0,220,220,0);
      transition: all 1.5s ease-in;
      will-change: background-color;
}