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

@@ -5,6 +5,7 @@
 import * as Fn from '../utils/fn.js';
 import * as Dom from '../utils/dom.js';
 import window from 'global/window';
+import * as browser from '../utils/browser';
 
 /** @import Player from '../player' */
 
@@ -319,6 +320,17 @@
       }
       this.updateForTrack(descriptionsTrack);
     }
+
+    if (browser.IS_SMART_TV && !window.CSS.supports('inset', '10px')) {
+      const textTrack = window.document.querySelector('.vjs-text-track-display');
+      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';
+      textTrack.style.bottom = '0px';
+    }
   }
 
   /**
@@ -484,6 +496,19 @@
         this.updateDisplayState(track);
       }
     }
+
+    if (browser.IS_SMART_TV && !window.CSS.supports('inset', '10px')) {
+      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' });
+        }
+      }
+    }
   }
 
 }

test/unit/tracks/text-track-display.test.js

@@ -500,4 +500,32 @@ if (!Html5.supportsNativeTextTracks()) {
 
     player.dispose();
   });
+
+  QUnit.test('should use relative position for vjs-text-track-display element if browser is does not support inset property', function(assert) {
+    // Set conditions for the use of the style modifications
+    window.CSS.supports = () => false;
+    browser.IS_SMART_TV = () => true;
+
+    const player = TestHelpers.makePlayer();
+    const track1 = {
+      kind: 'captions',
+      label: 'English',
+      language: 'en',
+      src: 'en.vtt',
+      default: true
+    };
+
+    // Add the text track
+    player.addRemoteTextTrack(track1, true);
+
+    // Make sure the ready handler runs
+    this.clock.tick(1);
+
+    const textTrack = window.document.querySelector('.vjs-text-track-display');
+
+    assert.ok(textTrack.style.position === 'relative', 'Style of position for vjs-text-track-display element should be relative');
+    assert.ok(textTrack.style.top === 'unset', 'Style of position for vjs-text-track-display element should be unset');
+    assert.ok(textTrack.style.bottom === '0px', 'Style of bottom for vjs-text-track-display element should be 0px');
+    player.dispose();
+  });
 }