RESOLVED CONFIGURATION CHANGED 214040
Incorrect height of element with percentage height inside button that is inside a flex container
https://bugs.webkit.org/show_bug.cgi?id=214040
Summary Incorrect height of element with percentage height inside button that is insi...
Robert Knight
Reported 2020-07-07 06:34:34 PDT
Created attachment 403682 [details] HTML/CSS test case A div with percentage height inside a `<button>` which is itself contained in a flex layout is sized differently in Safari than in Chrome and Firefox. In Chrome/FF the percentage height is respected. In Safari it behaves as if the element had auto height. Changing the `<button>` for a generic `<div>` element resolves the issue and results in consistent rendering across browsers. Steps to reproduce: See attached test case in Safari and compare with Chrome and Firefox. In Chrome/Firefox the button's content fills the button vertically. In Safari it does not. Instead it behaves as if it had `height: auto`. I tested with Safari 13.1 and Safari Tech Preview Release 109. This may be related to https://bugs.webkit.org/show_bug.cgi?id=205447. Downstream bug report: https://github.com/hypothesis/client/issues/2302#issuecomment-654632234
Attachments
HTML/CSS test case (633 bytes, text/plain)
2020-07-07 06:34 PDT, Robert Knight
no flags
Sergio Villar Senin
Comment 1 2020-07-07 09:08:37 PDT
(In reply to Robert Knight from comment #0) > Created attachment 403682 [details] > HTML/CSS test case > > A div with percentage height inside a `<button>` which is itself contained > in a flex layout is sized differently in Safari than in Chrome and Firefox. > In Chrome/FF the percentage height is respected. In Safari it behaves as if > the element had auto height. Changing the `<button>` for a generic `<div>` > element resolves the issue and results in consistent rendering across > browsers. > > Steps to reproduce: See attached test case in Safari and compare with Chrome > and Firefox. In Chrome/Firefox the button's content fills the button > vertically. In Safari it does not. Instead it behaves as if it had `height: > auto`. > > I tested with Safari 13.1 and Safari Tech Preview Release 109. > > This may be related to https://bugs.webkit.org/show_bug.cgi?id=205447. Yeah there are some issues with percentage heights and flexbox. Question is, is this bug report a regression or just something that you've recently spotted?
Robert Knight
Comment 2 2020-07-07 09:44:44 PDT
> Yeah there are some issues with percentage heights and flexbox. Question is, is this bug report a regression or just something that you've recently spotted? We encountered this after some CSS refactoring unexpectedly caused different output in Safari vs Chrome/FF. I haven't tested with earlier versions of Safari.
Radar WebKit Bug Importer
Comment 3 2020-07-07 18:26:32 PDT
Ahmad Saleem
Comment 4 2023-01-14 16:17:51 PST
I changed the test case in JSFiddle (in URL Field), I am not able to reproduce this issue in Safari 16.2 and STP161 are matching with Chrome Canary 111 and Firefox Nightly 110. Appreciate if someone else can confirm. Thanks!
Karl Dubost
Comment 5 2024-06-20 21:32:18 PDT
Thanks Ahmad. No differences indeed.
Note You need to log in before you can comment on or make changes to this bug.