Bug 168170 – REGRESSION: Update volume and scrubbing slider to match HI designs

• Component: Media
• Status: RESOLVED FIXED

The black border around the thumb in the volume slider is clipped out at the top. See screenshot.

Created attachment 301257 [details]
Volume slider

[Antoine Quint]

<rdar://problem/28095266>

[Antoine Quint]

We have a radar for bringing the blending and rendering of the controls bar, volume slider and track menu up to spec. We'll use this Bugzilla bug to track this as well.

[Antoine Quint]

I have the code ready for this but there are a lot of tests to rebaseline, currently there are 31 broken tests due to the source changes.

[Antoine Quint]

Created attachment 301400 [details]
Patch

[Dean Jackson]

Comment on attachment 301400 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=301400&action=review

> Source/WebCore/ChangeLog:27
> +        On macOS, we draw the whole slider with a <canvas> element with "mix-blend-mode"
> +        set to "plus-lighter". On iOS, we draw the track as a <div> with "mix-blend-mode"
> +        set to "plus-darker" and draw the fill (up to the thumb) in the <canvas> with
> +        no blend mode to obtain a pure white color, finally the thumb is rendered by the
> +        <input> element. We couldn't draw the pure white color with the track in the
> +        same <canvas> due to the "plus-darker" blend mode.

Why are iOS and macOS different designs here? I thought you'd want the loaded bar in macOS too.

> Source/WebCore/Modules/modern-media-controls/controls/airplay-button.css:28
> +    mix-blend-mode: normal !important;

Why?

[Antoine Quint]

(In reply to comment #6)
> Comment on attachment 301400 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=301400&action=review
> 
> > Source/WebCore/ChangeLog:27
> > +        On macOS, we draw the whole slider with a <canvas> element with "mix-blend-mode"
> > +        set to "plus-lighter". On iOS, we draw the track as a <div> with "mix-blend-mode"
> > +        set to "plus-darker" and draw the fill (up to the thumb) in the <canvas> with
> > +        no blend mode to obtain a pure white color, finally the thumb is rendered by the
> > +        <input> element. We couldn't draw the pure white color with the track in the
> > +        same <canvas> due to the "plus-darker" blend mode.
> 
> Why are iOS and macOS different designs here? I thought you'd want the
> loaded bar in macOS too.

We do, it's just drawn in the same <canvas> as everything else because the colours used agree with the blend mode, unlike for iOS.

> > Source/WebCore/Modules/modern-media-controls/controls/airplay-button.css:28
> > +    mix-blend-mode: normal !important;
> 
> Why?

Because the selector setting the blend mode for inline controls on macOS is more specific.

[Antoine Quint]

Committed r212280: <http://trac.webkit.org/changeset/212280>