Media control volume slider should be vertical to avoid flickering issues.
authorroger_fong@apple.com <roger_fong@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 2 May 2015 00:47:04 +0000 (00:47 +0000)
committerroger_fong@apple.com <roger_fong@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 2 May 2015 00:47:04 +0000 (00:47 +0000)
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):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@183703 268f45cc-cd09-0410-ab3c-d52691b4dbfc

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

index b4c53d8..86b60d8 100644 (file)
@@ -1,3 +1,21 @@
+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>
 
         Expand test infrastructure to support scrolling tests (Part 4): Scroll Snap Support
index e61b6cf..2075176 100644 (file)
@@ -213,16 +213,13 @@ video::-webkit-media-controls-panel .volume-box,
 audio::-webkit-media-controls-panel .volume-box {
     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;
     -webkit-flex-direction: row;
@@ -230,8 +227,8 @@ audio::-webkit-media-controls-panel .volume-box {
     -webkit-justify-content: flex-end;
 
     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 */
 
 }
 
@@ -274,7 +271,7 @@ audio::-webkit-media-controls-panel .volume-box:hover,
 audio::-webkit-media-controls-panel .volume-box:active {
     opacity: 1;
     /* resize to usable amount (rather than display:none) for AX and FKA */
-    width: 116px;
+    height: 116px;
 }
 
 audio::-webkit-media-controls-volume-slider,
@@ -282,13 +279,16 @@ video::-webkit-media-controls-volume-slider {
     -webkit-appearance: none !important;
     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;
 }
 
@@ -669,8 +669,11 @@ video:-webkit-full-screen::-webkit-media-controls-panel .volume-box {
 }
 
 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;
 }