1

The following code presents three options as labels for a radio button group.

When clicking a label, the background-color should transition.

It works as expected in Chrome and Safari 13.0.4 on OSX 10.15.2, but in iOS 13.3.1 a style (the label darkens) is briefly applied to the label immediately after touching.

Why might this be? Perhaps a touch-related pseudo class is being activated briefly and the browser stylesheet is causing the appearance of flicker.

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>
Ben Aston
  • 53,718
  • 65
  • 205
  • 331
  • What happens if you put, for example, a duration of 3 seconds for the transition? – Pine Code Mar 26 '20 at 10:29
  • The "flicker" is still there but is more delayed. Basically, I think there is a touch pseudo class (or something) that is changing the rendering of the label briefly, before the real animation takes effect. – Ben Aston Mar 26 '20 at 10:32
  • Can [this](https://stackoverflow.com/a/3921870/3918095) help? – Pine Code Mar 26 '20 at 10:35
  • I have tried that. I don't think that is it. This is about a styling of the label immediately after "touchup". By slowing down the animation per your suggestion I can see that this is not really a "flicker" per-se, but two separate CSS styles taking effect (in my current opinion). – Ben Aston Mar 26 '20 at 10:37

1 Answers1

2

Try the following in order and see which one works for you:

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;
}
Ben Aston
  • 53,718
  • 65
  • 205
  • 331
Shravan Dhar
  • 1,455
  • 10
  • 18