fix(mux-player): use CSS to disable subtitle shifting for iOS in full…

…screen. (#958)

Blocked by muxinc/media-chrome#946
Fixes #863

Smoke tested 👍 on both iOS Safari and iOS Chrome, plus desktop browsers
for regression testing.

packages/mux-player/package.json

@@ -96,7 +96,7 @@
   "dependencies": {
     "@mux/mux-video": "0.20.0",
     "@mux/playback-core": "0.25.0",
-    "media-chrome": "~3.2.3"
+    "media-chrome": "~3.2.5"
   },
   "devDependencies": {
     "@mux/esbuilder": "0.1.0",

packages/mux-player/src/themes/classic/classic.html

@@ -62,16 +62,28 @@
 
     /* 0.433s is the transition duration for VTT Regions.
      * Borrowed here, so the captions don't move too fast. */
-    media-controller ::slotted([slot='media']) {
+    media-controller {
       --media-webkit-text-track-transition: transform 0.433s ease-out 0.3s;
     }
-    media-controller:is([mediapaused],:not([userinactive])) ::slotted([slot='media']) {
+    media-controller:is([mediapaused],:not([userinactive])) {
       /* 42px is the height of the control bar and progress bar
        * with an additional 5px as a buffer, to get 47px */
       --media-webkit-text-track-transform: translateY(-47px);
       --media-webkit-text-track-transition: transform 0.15s ease;
     }
 
+    /*
+     * CSS specific to iOS devices.
+     * See: https://stackoverflow.com/questions/30102792/css-media-query-to-target-only-ios-devices/60220757#60220757
+     */
+     @supports (-webkit-touch-callout: none) {
+      /* Disable subtitle adjusting for iOS Safari */
+      media-controller[mediaisfullscreen] {
+        --media-webkit-text-track-transform: unset;
+        --media-webkit-text-track-transition: unset;
+      }
+    }
+
     :host media-time-range {
       color: var(--_primary-color);
       --media-range-thumb-opacity: 0;

packages/mux-player/src/themes/gerwig/gerwig.html

@@ -66,15 +66,27 @@
      * 0.433s is the transition duration for VTT Regions.
      * Borrowed here, so the captions don't move too fast.
      */
-    media-controller ::slotted([slot='media']) {
+    media-controller {
       --media-webkit-text-track-transform: translateY(0) scale(0.98);
       --media-webkit-text-track-transition: transform 0.433s ease-out 0.3s;
     }
-    media-controller:is([mediapaused], :not([userinactive])) ::slotted([slot='media']) {
+    media-controller:is([mediapaused], :not([userinactive])) {
       --media-webkit-text-track-transform: translateY(-50px) scale(0.98);
       --media-webkit-text-track-transition: transform 0.15s ease;
     }
 
+    /*
+     * CSS specific to iOS devices.
+     * See: https://stackoverflow.com/questions/30102792/css-media-query-to-target-only-ios-devices/60220757#60220757
+     */
+    @supports (-webkit-touch-callout: none) {
+      /* Disable subtitle adjusting for iOS Safari */
+      media-controller[mediaisfullscreen] {
+        --media-webkit-text-track-transform: unset;
+        --media-webkit-text-track-transition: unset;
+      }
+    }
+
     media-time-range {
       --media-box-padding-left: 6px;
       --media-box-padding-right: 6px;

yarn.lock

@@ -11192,10 +11192,10 @@ mdn-data@2.0.4:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
   integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
 
-media-chrome@~3.2.3:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/media-chrome/-/media-chrome-3.2.3.tgz#581d3cc0ea4994838884ac3d769b95cc50954c1e"
-  integrity sha512-DlOlyciT5YgOn5cwGvLWz+OVUVgvyxsRLtfpIQJ11F10+Ix7tDjEqMWsnkL81be9iD3uh/SN35TIk2pRvvEAig==
+media-chrome@~3.2.5:
+  version "3.2.5"
+  resolved "https://registry.yarnpkg.com/media-chrome/-/media-chrome-3.2.5.tgz#657722a216e3c0f877d9522fce7425e25da7e137"
+  integrity sha512-tTsgS7x77Bn4p/wca/Si/7A+Q3z9DzKq0SOkroQvrNMXBVyQasMayDcsKg5Ur5NGsymZfttnJi7tXvVr/tPj8g==
 
 media-tracks@~0.3.2:
   version "0.3.2"