fix: allow captions in devices that use old chrome to be shown

src/css/components/_text-track.scss

@@ -46,3 +46,10 @@ video::-webkit-media-text-track-display {
   text-align: center !important;
   width: 80% !important;
 }
+
+.video-js .vjs-text-track-display > div {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}

src/js/tracks/text-track-display.js

@@ -319,6 +319,23 @@ class TextTrackDisplay extends Component {
       }
       this.updateForTrack(descriptionsTrack);
     }
+
+    if (!window.CSS.supports('inset', '0')) {
+      const textTrack = window.document.querySelector('.vjs-text-track-display');
+      const player = window.document.querySelector('video-js');
+      const textTrackHeight = textTrack.getBoundingClientRect().height;
+
+      // This styles are required to be inline
+      textTrack.style.position = 'relative';
+      textTrack.style.height = textTrackHeight + 'px';
+      textTrack.style.top = 'unset';
+
+      if (player.classList.contains('vjs-fullscreen')) {
+        textTrack.style.bottom = textTrackHeight + 'px';
+      } else {
+        textTrack.style.bottom = '0px';
+      }
+    }
   }
 
   /**
@@ -484,6 +501,19 @@ class TextTrackDisplay extends Component {
         this.updateDisplayState(track);
       }
     }
+
+    if (!window.CSS.supports('inset', '0')) {
+      const document_ = window.document;
+      const vjsTextTrackCue = document_.querySelector('.vjs-text-track-cue');
+
+      if (vjsTextTrackCue) {
+        const insetStyles = vjsTextTrackCue.style.inset.split(' ');
+
+        if (insetStyles.length === 3) {
+          Object.assign(vjsTextTrackCue.style, { top: insetStyles[0], right: insetStyles[1], bottom: insetStyles[2], left: 'unset' });
+        }
+      }
+    }
   }
 
 }