[iOS]: Inline video controls are blurry on scaled-down pages on non-retina devices.
authorzalan@apple.com <zalan@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 24 Jul 2015 22:25:52 +0000 (22:25 +0000)
committerzalan@apple.com <zalan@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 24 Jul 2015 22:25:52 +0000 (22:25 +0000)
https://bugs.webkit.org/show_bug.cgi?id=147272
rdar://problem/21429111

Reviewed by Simon Fraser.

Blurry inline video controls are the result of transform scaling up the content when the page
is zoomed out (page scale > 1).
This patch addresses the blurriness by switching to css zoom when the content is being scaled up.
While transform scale is a paint time operation, css zoom triggers layout and the content is getting
painted on a non-scaled graphics context.

* Modules/mediacontrols/mediaControlsiOS.css:
(audio::-webkit-media-controls-timeline-container):
* Modules/mediacontrols/mediaControlsiOS.js:
(ControllerIOS.prototype.set pageScaleFactor):

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

Source/WebCore/ChangeLog
Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css
Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js

index 1b75f41..7a45ca6 100644 (file)
@@ -1,3 +1,22 @@
+2015-07-24  Zalan Bujtas  <zalan@apple.com>
+
+        [iOS]: Inline video controls are blurry on scaled-down pages on non-retina devices.
+        https://bugs.webkit.org/show_bug.cgi?id=147272
+        rdar://problem/21429111
+
+        Reviewed by Simon Fraser.
+
+        Blurry inline video controls are the result of transform scaling up the content when the page
+        is zoomed out (page scale > 1).
+        This patch addresses the blurriness by switching to css zoom when the content is being scaled up.
+        While transform scale is a paint time operation, css zoom triggers layout and the content is getting
+        painted on a non-scaled graphics context.
+
+        * Modules/mediacontrols/mediaControlsiOS.css:
+        (audio::-webkit-media-controls-timeline-container):
+        * Modules/mediacontrols/mediaControlsiOS.js:
+        (ControllerIOS.prototype.set pageScaleFactor):
+
 2015-07-24  Alexey Proskuryakov  <ap@apple.com>
 
         Remove WEBCORE_EXPORT from Page::allowsMediaDocumentInlinePlayback()
index 9d0cf35..6f67735 100644 (file)
@@ -478,6 +478,7 @@ audio::-webkit-media-controls-timeline-container {
     position: relative;
     padding: 0;
     -webkit-order: 2;
+    -webkit-text-size-adjust: auto;
 }
 
 audio::-webkit-media-controls-timeline-container {
index 75abff5..7756ef3 100644 (file)
@@ -674,12 +674,20 @@ ControllerIOS.prototype = {
         if (this.controls.startPlaybackButton)
             this.controls.startPlaybackButton.style.webkitTransform = scaleTransform;
         if (this.controls.panel) {
-            var bottomAligment = -2 * scaleValue;
-            this.controls.panel.style.bottom = bottomAligment + "px";
-            this.controls.panel.style.paddingBottom = -(newScaleFactor * bottomAligment) + "px";
-            this.controls.panel.style.width = Math.round(newScaleFactor * 100) + "%";
-            this.controls.panel.style.webkitTransform = scaleTransform;
-
+            if (scaleValue > 1) {
+                this.controls.panel.style.width = "100%";
+                this.controls.panel.style.zoom = scaleValue;
+                this.controls.panel.style.webkitTransform = "scale(1)";
+                this.controls.timelineBox.style.webkitTextSizeAdjust = (100 * scaleValue) + "%";
+            } else {
+                var bottomAligment = -2 * scaleValue;
+                this.controls.panel.style.bottom = bottomAligment + "px";
+                this.controls.panel.style.paddingBottom = -(newScaleFactor * bottomAligment) + "px";
+                this.controls.panel.style.width = Math.round(newScaleFactor * 100) + "%";
+                this.controls.panel.style.webkitTransform = scaleTransform;
+                this.controls.timelineBox.style.webkitTextSizeAdjust = "auto";
+                this.controls.panel.style.zoom = 1;
+            }
             this.controls.panelBackground.style.height = (50 * scaleValue) + "px";
 
             this.setNeedsTimelineMetricsUpdate();