The black border around the thumb in the volume slider is clipped out at the top. See screenshot.
Created attachment 301257 [details] Volume slider
<rdar://problem/28095266>
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.
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.
Created attachment 301400 [details] Patch
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?
(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.
Committed r212280: <http://trac.webkit.org/changeset/212280>