@chemoish Fix captions sticking to bottom for webkit browsers. Fixes #2193. closes #2702

CHANGELOG.md

@@ -18,6 +18,7 @@ CHANGELOG
 * @misteroneill updated modal dialog CSS ([view](https://github.com/videojs/video.js/pull/2756))
 * @misteroneill Add browserify
 * @brkattk updated emulateTextTrack to exit early if no textTracks ([view](https://github.com/videojs/video.js/pull/2426))
+* @chemoish Fix captions sticking to bottom for webkit browsers. Fixes #2193 ([view](https://github.com/videojs/video.js/pull/2702))
 
 --------------------
 

src/css/_utilities.scss

@@ -5,6 +5,14 @@
   background-color: rgba($color, $alpha);
 }
 
+@mixin transform($transform) {
+  -moz-transform: $transform;
+  -ms-transform: $transform;
+  -o-transform: $transform;
+  -webkit-transform: $transform;
+  transform: $transform;
+}
+
 @mixin transition($string: $transition--default) {
   -webkit-transition: $string;
   -moz-transition: $string;

src/css/components/_text-track.scss

@@ -1,3 +1,4 @@
+/* Emulated tracks */
 .vjs-text-track-display {
   position: absolute;
   bottom: 3em;
@@ -24,3 +25,13 @@
 .vjs-subtitles { color: #fff /* Subtitles are white */; }
 .vjs-captions { color: #fc6 /* Captions are yellow */; }
 .vjs-tt-cue { display: block; }
+
+/* Native tracks */
+video::-webkit-media-text-track-display {
+  @include transform(translateY(-3em));
+}
+
+/* Move captions down when controls aren't being shown */
+.video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display {
+  @include transform(translateY(-1.5em));
+}