Bug 224282

Summary:

Pages with nested HTML elements having display: flex and height: 100% freeze on Safari

Product:

WebKit

Reporter:

Kapeel <kapeels42>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Major

CC:

bfulgham, koivisto, simon.fraser, smoley, svillar, turboki, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari 14

Hardware:

Mac (Intel)

OS:

macOS 10.15

Attachments:

Description	Flags
Page to reproduce the problem	none

Description Kapeel 2021-04-07 08:36:26 PDT

Created attachment 425399 [details]
Page to reproduce the problem

Steps to Reproduce: 
1. Open attached flex.html in Safari (also available at https://kapeels.github.io/nested-layouts/flex.html)

Safari fails to open the page. Chromium (v91.0.4441.0) and Firefox (v86.0) are able to render the page instantly.
Safari v14.0.3 (15610.4.3.1.7, 15610) and Safari Technology Preview 123 have the same behavior.

This problem is easy to run into when custom elements that use flex layouts and height: 100% in their shadow roots around <slot /> elements are nested.

https://bugs.webkit.org/show_bug.cgi?id=222202 seems related but the fix does not appear to address this issue in Safari Technology Preview 123.

Comment 1 Smoley 2021-04-07 11:47:00 PDT

Thanks for filing, I'm able to reproduce this issue on Safari 13 as well as TOT.

Comment 2 Radar WebKit Bug Importer 2021-04-07 11:47:09 PDT

<rdar://problem/76358367>

Comment 3 Bojan Beran 2021-04-07 13:33:46 PDT

FYI, this same issue is present with using Grid layouts. Check this out:

https://kapeels.github.io/nested-layouts/playground.html

You can nest 100s of flex or grid layouts without an issue, but setting height:100% and Im seeing perf degredatations at around 7 levels of nesting for Grid.