A ::choice net compatibility challenge

There is a latest Twitter bug that is an actual challenge for me. Yeah, I do know; there are numerous bugs since Elmo fired half of the Twitter stuff. Nonetheless, this explicit one relies on one thing aside from the struggling engineering group however an internet compatibility challenge.

Right here is the bug in query in all its glory.

Suppose you are writing a Tweet or DM within the Twitter UI utilizing Chrome; the textual content choice is invisible. That is a fairly unhealthy UX and an accessibility challenge.

So what’s taking place? Fortunately, it is the online, and debugging is only a matter of spinning up DevTools in Chrome.

Setting background: clear on the ::choice pseudo-element is odd as a result of you possibly can’t see your textual content choice, however it will get even funnier!

Here is Twitter in Firefox.

Choosing textual content works high quality in Firefox and Safari although the choice background is ready to clear on a father or mother aspect.

The identical transparency types are in place, however textual content modifying is not damaged and nonetheless reveals choice highlights in non-Chromiums.

I did not really feel like additional debugging the Twitter JS app, so this is a reproducible instance.

<div>
  <span>
    Hi there phrase! Choose me!
  </span>
</div>
<div>
  <span>
    Hi there phrase! Choose me!
  </span>
</div>



physique {
 colour: lightgrey;
}

div::choice {
 background: clear;
}
physique {
 colour: lightgrey;
}

div::choice {
 background: clear;
}

Chrome rightfully makes use of a clear background in the event you’re choosing textual content. Safari and Firefox ignore it.

Alternatively, if ::choice is not scoped to a component, Chrome, Firefox and Safari work the identical.

<div>
  <span>
    Hi there phrase! Choose me!
  </span>
</div>
<div>
  <span>
    Hi there phrase! Choose me!
  </span>
</div>



physique {
  colour: lightgrey;
}

::choice {
  background: clear;
}
physique {
  colour: lightgrey;
}

::choice {
  background: clear;
}

So I assume, Chrome is doing the best factor right here (Twitter doesn’t, although!), and it is certainly an internet compat challenge. So what can I do about it now?

Some years in the past, Mozilla kicked off webcompat.com to present builders a easy device for browser compatibility reporting. Report a bug, and the workforce behind it makes certain to meet up with browser distributors. It is a fantastic thought and the perfect factor: the undertaking nonetheless appears to be energetic!

Here is my bug if you wish to observe alongside.

And if in case you have any concepts on what’s up, let me know!