Changeset 171593 in webkit


Ignore:
Timestamp:
Jul 25, 2014 7:47:31 AM (10 years ago)
Author:
Alan Bujtas
Message:

Subpixel rendering: iOS video playback controls look blurry.
​https://bugs.webkit.org/show_bug.cgi?id=135245
<rdar://problem/16878037>

Reviewed by Simon Fraser.

This patch introduces a compositing parent of the overlay control panel so that
the transformed overlay panel becomes sharp. This is a workaround for webkit.org/b/135246.

Can't find a way to test it yet.

Source/WebCore:

  • Modules/mediacontrols/mediaControlsApple.css:

(video::-webkit-media-controls-panel-composited-parent):

  • Modules/mediacontrols/mediaControlsApple.js:

(Controller.prototype.createControls):
(Controller.prototype.addControls):

  • Modules/mediacontrols/mediaControlsiOS.css:

(video::-webkit-media-controls-panel-composited-parent):

  • Modules/mediacontrols/mediaControlsiOS.js: This is a workaround for webkit.org/b/135248

It pushes the overlay panel down to close the gap with the video element. Since the
panel's size in css pixels is scale dependent, the gap needs to be scale dependent too.
(ControllerIOS.prototype.set pageScaleFactor):

LayoutTests:

  • platform/mac/fast/hidpi/video-controls-in-hidpi-expected.txt:
  • platform/mac/fast/layers/video-layer-expected.txt:
  • platform/mac/media/audio-controls-rendering-expected.txt:
  • platform/mac/media/controls-after-reload-expected.txt:
  • platform/mac/media/controls-strict-expected.txt:
  • platform/mac/media/controls-without-preload-expected.txt:
  • platform/mac/media/media-controls-clone-expected.txt:
  • platform/mac/media/video-no-audio-expected.txt:
Location:
trunk
Files:
14 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r171592 r171593  
     12014-07-25  Zalan Bujtas  <zalan@apple.com>
     2
     3        Subpixel rendering: iOS video playback controls look blurry.
     4        https://bugs.webkit.org/show_bug.cgi?id=135245
     5        <rdar://problem/16878037>
     6
     7        Reviewed by Simon Fraser.
     8
     9        This patch introduces a compositing parent of the overlay control panel so that
     10        the transformed overlay panel becomes sharp. This is a workaround for webkit.org/b/135246.
     11
     12        Can't find a way to test it yet.
     13
     14        * platform/mac/fast/hidpi/video-controls-in-hidpi-expected.txt:
     15        * platform/mac/fast/layers/video-layer-expected.txt:
     16        * platform/mac/media/audio-controls-rendering-expected.txt:
     17        * platform/mac/media/controls-after-reload-expected.txt:
     18        * platform/mac/media/controls-strict-expected.txt:
     19        * platform/mac/media/controls-without-preload-expected.txt:
     20        * platform/mac/media/media-controls-clone-expected.txt:
     21        * platform/mac/media/video-no-audio-expected.txt:
     22
    1232014-07-25  Dirk Schulze  <krit@webkit.org>
    224

  • trunk/LayoutTests/platform/mac/fast/hidpi/video-controls-in-hidpi-expected.txt

    r171184 r171593  
    1414  RenderFlexibleBox {DIV} at (0,0) size 300x150
    1515layer at (8,151) size 300x25
    16   RenderFlexibleBox {DIV} at (0,125) size 300x25
     16  RenderBlock {DIV} at (0,125) size 300x25
     17layer at (8,151) size 300x25
     18  RenderFlexibleBox {DIV} at (0,0) size 300x25
    1719layer at (14,156) size 16x16
    1820  RenderButton {BUTTON} at (6,4) size 16x17 [color=#FFFFFF]

  • trunk/LayoutTests/platform/mac/fast/layers/video-layer-expected.txt

    r171184 r171593  
    1919  RenderFlexibleBox {DIV} at (1,1) size 300x150
    2020layer at (59,236) size 300x25
    21   RenderFlexibleBox {DIV} at (0,125) size 300x25
     21  RenderBlock {DIV} at (0,125) size 300x25
     22layer at (59,236) size 300x25
     23  RenderFlexibleBox {DIV} at (0,0) size 300x25
    2224layer at (65,241) size 16x16
    2325  RenderButton {BUTTON} at (6,4) size 16x17 [color=#FFFFFF]

  • trunk/LayoutTests/platform/mac/media/audio-controls-rendering-expected.txt

    r164140 r171593  
    1717layer at (8,42) size 200x25
    1818  RenderFlexibleBox {DIV} at (0,0) size 200x25
     19    RenderBlock {DIV} at (0,0) size 200x25
    1920layer at (8,42) size 200x25
    2021  RenderFlexibleBox {DIV} at (0,0) size 200x25
    … …  
    5556layer at (8,85) size 320x25
    5657  RenderFlexibleBox {DIV} at (0,0) size 320x25
     58    RenderBlock {DIV} at (0,0) size 320x25
    5759layer at (8,85) size 320x25
    5860  RenderFlexibleBox {DIV} at (0,0) size 320x25
    … …  
    9597layer at (8,128) size 320x100
    9698  RenderFlexibleBox {DIV} at (0,0) size 320x100
     99    RenderBlock {DIV} at (0,75) size 320x25
    97100layer at (8,203) size 320x25
    98   RenderFlexibleBox {DIV} at (0,75) size 320x25
     101  RenderFlexibleBox {DIV} at (0,0) size 320x25
    99102layer at (14,208) size 16x16
    100103  RenderButton {BUTTON} at (6,4) size 16x17 [color=#FFFFFF]

  • trunk/LayoutTests/platform/mac/media/controls-after-reload-expected.txt

    r164140 r171593  
    1414  RenderFlexibleBox {DIV} at (0,0) size 320x240
    1515layer at (8,257) size 320x25
    16   RenderFlexibleBox {DIV} at (0,215) size 320x25
     16  RenderBlock {DIV} at (0,215) size 320x25
     17layer at (8,257) size 320x25
     18  RenderFlexibleBox {DIV} at (0,0) size 320x25
    1719layer at (14,262) size 16x16
    1820  RenderButton {BUTTON} at (6,4) size 16x17 [color=#FFFFFF]

  • trunk/LayoutTests/platform/mac/media/controls-strict-expected.txt

    r164140 r171593  
    1414  RenderFlexibleBox {DIV} at (0,0) size 320x240
    1515layer at (8,265) size 320x25
    16   RenderFlexibleBox {DIV} at (0,215) size 320x25
     16  RenderBlock {DIV} at (0,215) size 320x25
     17layer at (8,265) size 320x25
     18  RenderFlexibleBox {DIV} at (0,0) size 320x25
    1719layer at (14,270) size 16x16
    1820  RenderButton {BUTTON} at (6,4) size 16x17 [color=#FFFFFF]

  • trunk/LayoutTests/platform/mac/media/controls-without-preload-expected.txt

    r164140 r171593  
    1414  RenderFlexibleBox {DIV} at (0,0) size 320x240
    1515layer at (8,257) size 320x25
    16   RenderFlexibleBox {DIV} at (0,215) size 320x25
     16  RenderBlock {DIV} at (0,215) size 320x25
     17layer at (8,257) size 320x25
     18  RenderFlexibleBox {DIV} at (0,0) size 320x25
    1719layer at (14,262) size 16x16
    1820  RenderButton {BUTTON} at (6,4) size 16x17 [color=#FFFFFF]

  • trunk/LayoutTests/platform/mac/media/media-controls-clone-expected.txt

    r171184 r171593  
    1515  RenderFlexibleBox {DIV} at (0,0) size 300x150
    1616layer at (8,133) size 300x25
    17   RenderFlexibleBox {DIV} at (0,125) size 300x25
     17  RenderBlock {DIV} at (0,125) size 300x25
     18layer at (8,133) size 300x25
     19  RenderFlexibleBox {DIV} at (0,0) size 300x25
    1820layer at (14,138) size 16x16
    1921  RenderButton {BUTTON} at (6,4) size 16x17 [color=#FFFFFF]
    … …  
    2628layer at (308,133) size 200x25
    2729  RenderFlexibleBox {DIV} at (0,0) size 200x25
     30    RenderBlock {DIV} at (0,0) size 200x25
    2831layer at (308,133) size 200x25
    2932  RenderFlexibleBox {DIV} at (0,0) size 200x25
    … …  
    3942  RenderFlexibleBox {DIV} at (0,0) size 300x150
    4043layer at (8,287) size 300x25
    41   RenderFlexibleBox {DIV} at (0,125) size 300x25
     44  RenderBlock {DIV} at (0,125) size 300x25
     45layer at (8,287) size 300x25
     46  RenderFlexibleBox {DIV} at (0,0) size 300x25
    4247layer at (14,292) size 16x16
    4348  RenderButton {BUTTON} at (6,4) size 16x17 [color=#FFFFFF]
    … …  
    5055layer at (308,287) size 200x25
    5156  RenderFlexibleBox {DIV} at (0,0) size 200x25
     57    RenderBlock {DIV} at (0,0) size 200x25
    5258layer at (308,287) size 200x25
    5359  RenderFlexibleBox {DIV} at (0,0) size 200x25

  • trunk/LayoutTests/platform/mac/media/video-no-audio-expected.txt

    r164140 r171593  
    1414  RenderFlexibleBox {DIV} at (0,0) size 352x288
    1515layer at (8,305) size 352x25
    16   RenderFlexibleBox {DIV} at (0,263) size 352x25
     16  RenderBlock {DIV} at (0,263) size 352x25
     17layer at (8,305) size 352x25
     18  RenderFlexibleBox {DIV} at (0,0) size 352x25
    1719layer at (14,310) size 16x16
    1820  RenderButton {BUTTON} at (6,4) size 16x17 [color=#FFFFFF]

  • trunk/Source/WebCore/ChangeLog

    r171591 r171593  
     12014-07-25  Zalan Bujtas  <zalan@apple.com>
     2
     3        Subpixel rendering: iOS video playback controls look blurry.
     4        https://bugs.webkit.org/show_bug.cgi?id=135245
     5        <rdar://problem/16878037>
     6
     7        Reviewed by Simon Fraser.
     8
     9        This patch introduces a compositing parent of the overlay control panel so that
     10        the transformed overlay panel becomes sharp. This is a workaround for webkit.org/b/135246.
     11
     12        Can't find a way to test it yet.
     13
     14        * Modules/mediacontrols/mediaControlsApple.css:
     15        (video::-webkit-media-controls-panel-composited-parent):
     16        * Modules/mediacontrols/mediaControlsApple.js:
     17        (Controller.prototype.createControls):
     18        (Controller.prototype.addControls):
     19        * Modules/mediacontrols/mediaControlsiOS.css:
     20        (video::-webkit-media-controls-panel-composited-parent):
     21        * Modules/mediacontrols/mediaControlsiOS.js: This is a workaround for webkit.org/b/135248
     22        It pushes the overlay panel down to close the gap with the video element. Since the
     23        panel's size in css pixels is scale dependent, the gap needs to be scale dependent too.
     24        (ControllerIOS.prototype.set pageScaleFactor):
     25
    1262014-07-24  Dirk Schulze  <krit@webkit.org>
    227

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

    r171158 r171593  
    6363    position: relative;
    6464    -webkit-flex: 1 1 auto;
     65}
     66
     67video::-webkit-media-controls-panel-composited-parent {
     68    -webkit-transform: translateZ(0);
     69    width: 100%;
    6570}
    6671

  • trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js

    r171184 r171593  
    286286    createControls: function()
    287287    {
     288        var panelCompositedParent = this.controls.panelCompositedParent = document.createElement('div');
     289        panelCompositedParent.setAttribute('pseudo', '-webkit-media-controls-panel-composited-parent');
     290
    288291        var panel = this.controls.panel = document.createElement('div');
    289292        panel.setAttribute('pseudo', '-webkit-media-controls-panel');
    … …  
    10271030    addControls: function()
    10281031    {
    1029         this.base.appendChild(this.controls.panel);
     1032        this.base.appendChild(this.controls.panelCompositedParent);
     1033        this.controls.panelCompositedParent.appendChild(this.controls.panel);
    10301034        this.setNeedsTimelineMetricsUpdate();
    10311035    },

  • trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css

    r171004 r171593  
    115115}
    116116
     117video::-webkit-media-controls-panel-composited-parent {
     118    -webkit-transform: translateZ(0);
     119    width: 100%;
     120}
     121
    117122audio::-webkit-media-controls-panel,
    118123video::-webkit-media-controls-panel {

  • trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js

    r171032 r171593  
    457457
    458458        if (newScaleFactor) {
    459             var scaleTransform = "scale(" + (1 / newScaleFactor) + ")";
     459            var scaleValue = 1 / newScaleFactor;
     460            var scaleTransform = "scale(" + scaleValue + ")";
    460461            if (this.controls.startPlaybackButton)
    461462                this.controls.startPlaybackButton.style.webkitTransform = scaleTransform;
    462463            if (this.controls.panel) {
    463                 this.controls.panel.style.width = (newScaleFactor * 100) + "%";
     464                var bottomAligment = -2 * scaleValue;
     465                this.controls.panel.style.bottom = bottomAligment + "px";
     466                this.controls.panel.style.paddingBottom = -(newScaleFactor * bottomAligment) + "px";
     467                this.controls.panel.style.width = Math.ceil(newScaleFactor * 100) + "%";
    464468                this.controls.panel.style.webkitTransform = scaleTransform;
    465469                this.setNeedsTimelineMetricsUpdate();
Note: See TracChangeset for help on using the changeset viewer.