From d0efd16b49564e4a36a4e83cf26d57a67fc8308b Mon Sep 17 00:00:00 2001
From: Carey Hinoki <carey.r.hinoki.-nd@disney.com>
Date: Fri, 30 Oct 2015 16:02:16 -0400
Subject: [PATCH] @chemoish Fix captions sticking to bottom for webkit
 browsers. Fixes #2193. closes #2702

---
 CHANGELOG.md                        |  1 +
 src/css/_utilities.scss             |  8 ++++++++
 src/css/components/_text-track.scss | 11 +++++++++++
 3 files changed, 20 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 451a912bd..ea852d457 100644
--- a/CHANGELOG.md
+++ b/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))
 
 --------------------
 
diff --git a/src/css/_utilities.scss b/src/css/_utilities.scss
index f5beea5bb..6621c2be0 100644
--- a/src/css/_utilities.scss
+++ b/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;
diff --git a/src/css/components/_text-track.scss b/src/css/components/_text-track.scss
index 540bb60ff..fb3a58b98 100644
--- a/src/css/components/_text-track.scss
+++ b/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));
+}