IE vtt track background color

Question

Why does IE load the .vtt without a black background but chromes does, need IE to be normal and have the black background have searched around to no prevail.

Any help with this issue will be greatly appreciated.

HTML:

 <video [src]='videoURL' controls (ended)="onVideoEnd($event)" [style.maxHeight]="screen.data.height">
    <track label="English" kind="subtitles" srclang="en" [src]="screen.data.ccs" default
 </video>

CSS

video {
    width: auto;
    position: absolute;
    top: 25%;
    left: 50%;
    height: 47%;
    width: auto;
    transform: translate(-50%, -50%);
}

video:fullscreen{
    transform: translate(0%, 0%);
}

Chrome:

IE:

Answer 1

According to the spec, you can style the cue

video::cue {
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: papayawhip;
}

video::cue(b) {
  color: peachpuff;

}

From memory, this works in IE.

Answer 2

Please check the CSS style, I guess perhaps you are using the ::cue CSS pseudo-element to set the background color. From this article, we can find that the IE browser doesn't support this property. So, it will not display the background color in IE browser.

I suggest you could try to remove the background color, so that in Chrome and IE browser, they will have the same style (without background color).