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
(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?
> 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.
<rdar://problem/65202889>
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!
Thanks Ahmad. No differences indeed.