Audio player in Chrome 68 (canary) unexpected size behaviour
Reported by
timotij...@gmail.com,
May 14 2018
|
|||||||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3426.0 Safari/537.36 Example URL: https://codepen.io/Krinkle/full/xjJYPg Steps to reproduce the problem: Starting in Chrome 68 (canary), the player interface for HTML5 audio elements seems to be overly big. Much bigger than what Chrome shipped thus far, and much bigger than what other major browsers are shipping. Additionally, it seems its height is not constrainable by regular means (neither 'height' nor 'overflow' has any effect). Attached are screenshots of the linked example in current stable Chrome, Firefox, Safari, Edge, and Mobile Safari. What is the expected behavior? Firstly, I would expect the default player to have a moderate size, perhaps between 1em and 2em in height (relative to the default font size) - which is what other majors browsers are and have been doing, including Chrome until now. Secondly, falling short of the first expectation, I expect that setting `height` will auto-magically constrain the dimensions, similar to how `width` auto-magically constrains the elements' dimensions. Hiding and compressing elements accordingly. This is naturally sub-optimal under various conditions, and a more caring page author would/should probably provide their own design, but to avoid layout breaks or inaccessible content, the browser should at the very least not render elements larger than the provided 'width' and 'height' styles. Especially when 'overflow: hidden' is set a well. What went wrong? 1) The player seems unexpectedly large and round. This is perhaps just something to get used to. 2) When applying 'height' and 'overflow: hidden', the player keeps its size and renders in a way that overlaps other text on the page. This is the core problem. Everything else is secondary. Does it occur on multiple sites: Yes Is it a problem with a plugin? No Did this work before? Yes 66 Does this work in other browsers? Yes Chrome version: 68.0.3426.0 Channel: n/a OS Version: OS X 10.13.2 Flash Version: Chrome 66: - roughly 2em by default, light grey and rectangular. - bigger: empty space, bottom-aligned. Firefox 59: - roughly 2em by default, dark grey and rectangular. - smaller: crops to the center. (Honours the CSS; No content problem.) - bigger: empty space, bottom-aligned. Safari 11: - roughly 2em by default, dark grey and rectangular. - smaller: elements retains the original box size. (Ignores the CSS, No content problem.) - bigger: empty space, bottom-aligned. Edge 16: - roughly 2em by default, dark grey and rectangular. - smaller: shrinks inner children proportionally. (Honours the CSS; No content problem.) - bigger: empty space, bottom-aligned. IE 11 (same as Edge, except the default player looked taller in the past; maybe around 4em or so) - dark grey and rectangular. Chrome 68 canary: - roughly 5em by default / unusually large. - white and big rounded corners / unusually round / unusually bright. - smaller: box is shrunk, but rendering remains big. Overlaps content and makes it inaccessible.
,
May 15 2018
,
May 15 2018
Bisected using the attached test.html fdfc5ae4154a67e0539b9d0a77b3c5e2da38f40b = https://crrev.com/c/922917 by steimel@chromium.org "Add fieldtrial testing config for new media controls" Landed in 67.0.3369.0 Bisected the underlying CL using "--enable-features=UseModernMediaControls" command line e89886f063ae935f46e73a651f4d12d8319be1e2 = https://crrev.com/c/886652 by steimel@chromium.org "Fix up CSS for audio tag to prevent sizing issues" Landed in 66.0.3335.0 (behind a feature flag) Looks like the change was intended, but I agree it might become unusable on many sites that expect the audio player to be small. On the bright side, we can customize it via CSS: audio::-webkit-media-controls-enclosure { min-height: 32px; } audio { height: 32px; } You can enable "[x] Show user agent shadow DOM" in devtools settings to quickly inspect these internals.
,
May 15 2018
Thanks for filing the issue! Able to reproduce the issue on reported chrome version 68.0.3426.0 and on the latest canary 68.0.3430.0 using Mac 10.13.1, Ubuntu 14.04 and Windows 10. Note: The issue is also seen on the latest beta 67.0.3396.40 Bisect Information: =================== Good Build: 67.0.3396.0 Bad Build : 68.0.3397.0 You are probably looking for a change made after 550805 (known good), but no later than 550807 (first known bad). CHANGELOG URL: https://chromium.googlesource.com/chromium/src/+log/9af7fd208ddfe3531b221e687037deec41eb6620..7a8df9d06cc7727c144cd0d31254f3651b263f44 Suspecting: https://chromium.googlesource.com/chromium/src/+/0fade57cc302b008312a196c44bd172ae2b70eac Review URL: https://chromium-review.googlesource.com/1006520 @Tommy Steimel: Please help in assigning it to the right owner if this is not related to your change. Note: Adding RB-Stable for M-67, Please remove if not applicable.
,
May 15 2018
Thanks for the feedback! As this is not a regression, removing the stable blocker label.
,
Jul 23
Issue 862101 has been merged into this issue.
,
Sep 22
,
Sep 24
Here is a screenshot of the codepen.io page from patchset 1 of crrev.com/c/1239725
,
Sep 24
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/d1a164e129deb89f56c96b3ff86b70fade47f594 commit d1a164e129deb89f56c96b3ff86b70fade47f594 Author: Tommy Steimel <steimel@chromium.org> Date: Mon Sep 24 19:04:44 2018 [Media Controls] Prevent sizing issue with audio controls This CL removes the min-height CSS properties for audio elements and video elements acting as audio elements. We had these rules to handle the width/height-zero elements in the MediaDocument, but we have changed how the MediaDocument sizing works, so they're no longer needed. Bug: 842900 Change-Id: I050aba4786f84754843ee611ead1dabe220381cb Reviewed-on: https://chromium-review.googlesource.com/1239725 Reviewed-by: Becca Hughes <beccahughes@chromium.org> Commit-Queue: Tommy Steimel <steimel@chromium.org> Cr-Commit-Position: refs/heads/master@{#593621} [add] https://crrev.com/d1a164e129deb89f56c96b3ff86b70fade47f594/third_party/WebKit/LayoutTests/media/controls/audio-element-should-not-exceed-its-set-height.html [modify] https://crrev.com/d1a164e129deb89f56c96b3ff86b70fade47f594/third_party/WebKit/LayoutTests/media/media-controls.js [modify] https://crrev.com/d1a164e129deb89f56c96b3ff86b70fade47f594/third_party/blink/renderer/modules/media_controls/resources/modernMediaControls.css
,
Sep 24
,
Oct 2
Issue 890277 has been merged into this issue. |
|||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||
Comment 1 by timotij...@gmail.com
, May 14 2018