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.
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.
<rdar://problem/99548840>
Pull request: https://github.com/WebKit/WebKit/pull/5056
Committed 255234@main (4145593d349c): <https://commits.webkit.org/255234@main> Reviewed commits have been landed. Closing PR #5056 and removing active labels.