WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
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
Details
View All
Add attachment
proposed patch, testcase, etc.
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
<
rdar://problem/65202889
>
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.
Top of Page
Format For Printing
XML
Clone This Bug