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 RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Major CC: bfulgham, koivisto, simon.fraser, smoley, svillar, turboki, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 14   
Hardware: Mac (Intel)   
OS: macOS 10.15   
Attachments:
Description Flags
Page to reproduce the problem none

Kapeel
Reported 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.
Attachments
Page to reproduce the problem (12.26 KB, text/html)
2021-04-07 08:36 PDT, Kapeel 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Smoley
Comment 1 2021-04-07 11:47:00 PDT
Thanks for filing, I'm able to reproduce this issue on Safari 13 as well as TOT.
Radar WebKit Bug Importer
Comment 2 2021-04-07 11:47:09 PDT
<rdar://problem/76358367>
Bojan Beran
Comment 3 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.
Note You need to log in before you can comment on or make changes to this bug.