Bug 244723 – Inexplicable top css being added to audio controls when height of audio element is adjusted on iOS

• Status: RESOLVED
• Resolution: FIXED
• Component: Media

[Jack Wellborn]

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.

[Alexey Proskuryakov]

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.

[Radar WebKit Bug Importer]

<rdar://problem/99548840>

[Devin Rousso]

Pull request: https://github.com/WebKit/WebKit/pull/5056

[EWS]

Committed 255234@main (4145593d349c): <https://commits.webkit.org/255234@main>

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