Remove tap highlight colour from video

[domlander]

What does this change?

Removes the tap highlight colour from videos. Affects some browsers on mobile devices.

Why?

This will stop the flash of blue when tapping a video to play/pause

Screenshots

Before

before.mov

After

after.mov

[github-actions]

Deploy build 26038 of dotcom:rendering-all to CODE

All deployment options

• Deploy build 26038 of dotcom:rendering-all to CODE
• Deploy parts of build 26038 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[gu-prout]

Seen on PROD (merged by @domlander 17 minutes and 45 seconds ago) Please check your changes!

[abeddow91]

I agree that it looks more polished but as its webkit, the browser support looks to be quite low (https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/-webkit-tap-highlight-color) and would only support webkit (eg not firefox for example) which means different behaviours across browsers and devices (eg supported on chrome but not safari desktop)

Equally, are there any accessibility concerns by removing this flash?

[abeddow91]

Pleased to see the refactor towards composable styles, personally i find this much easier to parse and it better seperates concerns.

[domlander]

I agree that it looks more polished but as its webkit, the browser support looks to be quite low (https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/-webkit-tap-highlight-color) and would only support webkit (eg not firefox for example) which means different behaviours across browsers and devices (eg supported on chrome but not safari desktop)

This change ensures that the functionality on the supported browsers listed there matches the functionality of the other browsers. The blue flash is not seen on browsers that do not support this property, so this change makes the experience consistent across browsers.

Equally, are there any accessibility concerns by removing this flash?

I don't think so, since the effect is purely visual and there is naturally a visual cue to indicate that the video has been tapped: the video is played and the play icon removed, or the video is paused and the play icon is displayed.