Bug 224282 - Pages with nested HTML elements having display: flex and height: 100% freeze on Safari
Summary: Pages with nested HTML elements having display: flex and height: 100% freeze ...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 14
Hardware: Mac (Intel) macOS 10.15
: P2 Major
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-04-07 08:36 PDT by Kapeel
Modified: 2021-04-07 13:33 PDT (History)
8 users (show)

See Also:

Attachments
Page to reproduce the problem (12.26 KB, text/html)
2021-04-07 08:36 PDT, Kapeel 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
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.