Changeset 183703 in webkit

Timestamp:

May 1, 2015 5:47:04 PM (9 years ago)

Author:

roger_fong@apple.com

Message:

Media control volume slider should be vertical to avoid flickering issues.
​https://bugs.webkit.org/show_bug.cgi?id=144496.
<rdar://problem/20451328>

Reviewed by Darin Adler.

• Modules/mediacontrols/mediaControlsApple.css:

Resize and reposition the volume box so that it does not have to rotated via a transform.
(audio::-webkit-media-controls-panel):
(audio::-webkit-media-controls-panel .volume-box): Also set overflow: hidden so we can't interact

with the volume slider while the volume box is hidden.

(audio::-webkit-media-controls-panel .volume-box:active):
Rotate and position the volume slider via transforms. Make sure it's not transformed in the fullscreen controls.
(video::-webkit-media-controls-volume-slider):
(video:-webkit-full-screen::-webkit-media-controls-volume-slider):

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• Modules/mediacontrols/mediaControlsApple.css (modified) (5 diffs)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2015-05-01  Roger Fong  <roger_fong@apple.com>
+
+        Media control volume slider should be vertical to avoid flickering issues.
+        https://bugs.webkit.org/show_bug.cgi?id=144496.
+        <rdar://problem/20451328>
+
+        Reviewed by Darin Adler.
+
+        * Modules/mediacontrols/mediaControlsApple.css:
+        Resize and reposition the volume box so that it does not have to rotated via a transform.
+        (audio::-webkit-media-controls-panel):
+        (audio::-webkit-media-controls-panel .volume-box): Also set overflow: hidden so we can't interact
+             with the volume slider while the volume box is hidden.
+        (audio::-webkit-media-controls-panel .volume-box:active):
+        Rotate and position the volume slider via transforms. Make sure it's not transformed in the fullscreen controls.
+        (video::-webkit-media-controls-volume-slider):
+        (video:-webkit-full-screen::-webkit-media-controls-volume-slider):
+
 2015-05-01  Brent Fulgham  <bfulgham@apple.com>
 

trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css

@@ -214 +214 @@
     position: absolute;
     box-sizing: border-box;
-    height: 63px;
-    bottom: 0;
-    left: 0;
+    width: 63px;
+    bottom: 5px;
+    left: -25px;
     
-    -webkit-clip-path: inset(20px 20px 20px 20px round 0px 4px 4px 0px);
-    -webkit-transform: rotate(-90deg) translateY(-51.5px) translateX(31.5px);
-
+    -webkit-clip-path: inset(20px 20px 20px 20px round 4px 4px 0px 0px);
     background-color: transparent;
-    border-bottom-right-radius: 4px;
-    border-top-right-radius: 4px;
+    overflow: hidden;
 
     display: -webkit-flex;
@@ -231 +228 @@
 
     opacity: 0;
-    /* make zero width (rather than display:none) for AX and FKA */
-    width: 0; /* will become 101px when shown */
+    /* make zero height (rather than display:none) for AX and FKA */
+    height: 0px; /* will become 116px when shown */
 
 }
@@ -275 +272 @@
     opacity: 1;
     /* resize to usable amount (rather than display:none) for AX and FKA */
-    width: 116px;
+    height: 116px;
 }
 
@@ -283 +280 @@
     box-sizing: border-box !important;
     height: 9px !important;
+    min-width: 64px !important;
     width: 64px !important;
     padding: 0 !important;
-    margin-right: 30px !important;
+    margin: 0 !important;
 
     background-color: transparent !important;
     background-size: 100% 100%;
     background-repeat: no-repeat;
+    -webkit-transform-origin: 0 0;
+    -webkit-transform: rotate(-90deg) translateY(28px) translateX(-40px);
     mix-blend-mode: plus-lighter;
 }
@@ -670 +670 @@
 
 video:-webkit-full-screen::-webkit-media-controls-volume-slider {
+    -webkit-transform: none;
     background-color: transparent;
+    min-width: 60px !important;
     width: 60px !important;
+    height: 9px !important;
     margin: 0 !important;
 }