Bug 244723

Summary: Inexplicable top css being added to audio controls when height of audio element is adjusted on iOS
Product: WebKit Reporter: Jack Wellborn <w0nka>
Component: MediaAssignee: Devin Rousso <hi>
Status: RESOLVED FIXED    
Severity: Normal CC: eric.carlson, graouts, hi, jer.noble, simon.fraser, webkit-bug-importer, wenson_hsieh, zalan
Priority: P2 Keywords: InRadar
Version: Safari 15   
Hardware: iPhone / iPad   
OS: iOS 15   
Attachments:
Description Flags
The top css being added. none

Description Jack Wellborn 2022-09-02 13:14:03 PDT 
Created attachment 462103 [details]
The top css being added.

Hello!

For some reason, it appears iOS Safari is adjusting the top CSS for the audio controls when height is added to the audio element. I first discovered this issue on daringfireball.net (e.g. https://daringfireball.net/thetalkshow/2022/08/31/ep-356) and was able to easily reproduce it with minimal effort at: https://jackwellborn.com/playground/Webkit/AudioElement/demo.html.

Reproduction Steps:
1. On macOS Safari, go to https://jackwellborn.com/playground/Webkit/AudioElement/demo.html
2. Note that both the paragraph above and the paragraph below the audio element are visible.
3. Now on iOS Safari, go to https://jackwellborn.com/playground/Webkit/AudioElement/demo.html

Expected:
Like on macOS, both the paragraph above and the paragraph below the audio element are visible.

Actual:
The paragraph below is covered by the audio element, which has been shifted down due to `top` css in the shadow dom.
Comment 1 Alexey Proskuryakov 2022-09-04 12:04:08 PDT 
Looks like the code was in modern-media-controls/controls/media-controls.js since 2017:

// We want to maintain the controls at a constant device height. To do so, we invert the page scale
// factor using a scale transform when scaling down, when the result will not appear pixelated and
// where the CSS zoom property produces incorrect text rendering due to enforcing the minimum font
// size. When we would end up scaling up, which would yield pixelation, we use the CSS zoom property
// which will not run into the font size issue.
Comment 2 Radar WebKit Bug Importer 2022-09-04 12:04:20 PDT 
<rdar://problem/99548840>
Comment 3 Devin Rousso 2022-10-05 16:49:16 PDT 
Pull request: https://github.com/WebKit/WebKit/pull/5056
Comment 4 EWS 2022-10-06 12:12:04 PDT 
Committed 255234@main (4145593d349c): <https://commits.webkit.org/255234@main>

Reviewed commits have been landed. Closing PR #5056 and removing active labels.