Background not applying for video closed captions ::cue on Firefox and Safari on iOS Mobile

Question

I am trying to style closed caption on HTML5 video player via ::cue css selector like below. codepen Link

::cue {
  background: rgba(255, 255, 255, 0.8); /*Not working on iOS Mobile Firefox, Safari*/
  color: #463C40;
}

the background property works fine in chrome - desktop, firefox - desktop. but the same is not working on iOS mobile firefox and safari.

I tried to implement the background color via linear-gradient like below. But it adds a outline(looks like a border) codepen link

::cue{
  color: #463C40;
  background-image: linear-gradient(90deg,rgba(255, 255, 255, 0.8),rgba(255, 255, 255, 0.8));
}

the background property is supported for ::cue have verified it from MDN. Is there any way to make the iOS mobile browsers to render the background color.

Thanks in advance.

Status Update (Jan 2024) : No solution found so far for this issue, we have switched back to browsers default way of showing closed captions on its own.

Answer 1

Maybe you can try the below code:

background: url("back.jpg") #033049;
or you can try this too: html, body {background:url('images/back.jpg');}