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

Jack Wellborn
Reported 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.
Attachments
The top css being added. (719.73 KB, image/png)
2022-09-02 13:14 PDT, Jack Wellborn 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Alexey Proskuryakov
Comment 1 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.
Radar WebKit Bug Importer
Comment 2 2022-09-04 12:04:20 PDT
<rdar://problem/99548840>
Devin Rousso
Comment 3 2022-10-05 16:49:16 PDT
Pull request: https://github.com/WebKit/WebKit/pull/5056
EWS
Comment 4 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.
Note You need to log in before you can comment on or make changes to this bug.