Bug 150445

Summary: Flexbox - flex direction column slow layout performance
Product: WebKit Reporter: Scott Bobertson <scottbobertson>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Major CC: beidson, bernd.helzer, eoconnor, hyatt, jonlee, l1657572, ljharb, mike.sherov, mozilla, mrflix, rik, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 9   
Hardware: Mac   
OS: OS X 10.10   

Description Scott Bobertson 2015-10-22 07:37:26 PDT
Nested divs with 'display: flex' and 'flex-direction: column' have very slow performance in Safari.

At a depth of 18 divs with these CSS properties Safari takes a total of 6578ms to layout and paint the divs this time grows exponentially as the depth of divs increases. This same test performed on Chrome or Firefox takes 2ms.

Here is a demo of the problem. (open the console to see the results)

http://codepen.io/anon/pen/zvRKYN?editors=001
Comment 1 Radar WebKit Bug Importer 2015-10-22 11:51:14 PDT
<rdar://problem/23222219>
Comment 2 James Seigel 2016-12-13 12:01:58 PST
Still seems to be a critical problem.  Definitely causes issues when nesting, or when products create deep nesting like react-native-web for example.
Comment 3 l1657572 2017-02-07 00:20:11 PST
I can confirm. I'm currently using a Flexbox framework which renders great on Chrome and Firefox, but slows to a crawl on Safari. Major issue.
Comment 4 Jon Lee 2017-02-28 10:51:23 PST
This is fixed with the latest flex box checkin in b168657.

*** This bug has been marked as a duplicate of bug 168657 ***