html - 在iOS 13.3.1中触摸后，标签样式立即发生这种变化的原因是什么？

Question

以下代码提供了三个选项作为单选按钮组的标签。

单击标签时，background-color应该过渡。

它可以在OSX 10.15.2的Chrome和Safari 13.0.4中按预期方式工作，但在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;
}