Bug 214040

Summary:

Incorrect height of element with percentage height inside button that is inside a flex container

Product:

WebKit

Reporter:

Robert Knight <robertknight>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED CONFIGURATION CHANGED

Severity:

Normal

CC:

ahmad.saleem792, bfulgham, karlcow, simon.fraser, svillar, webkit-bug-importer, zalan

Priority:

Keywords:

BrowserCompat, InRadar

Version:

Safari 13

Hardware:

Unspecified

OS:

Unspecified

URL:

https://jsfiddle.net/vwq06atp/show

Attachments:

Description	Flags
HTML/CSS test case	none

Description Robert Knight 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

Comment 1 Sergio Villar Senin 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?

Comment 2 Robert Knight 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.

Comment 3 Radar WebKit Bug Importer 2020-07-07 18:26:32 PDT

<rdar://problem/65202889>

Comment 4 Ahmad Saleem 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!

Comment 5 Karl Dubost 2024-06-20 21:32:18 PDT

Thanks Ahmad. No differences indeed.