Bug 150445 - Flexbox - flex direction column slow layout performance
Summary: Flexbox - flex direction column slow layout performance
Status: RESOLVED DUPLICATE of bug 168657
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 9
Hardware: Mac OS X 10.10
: P2 Major
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2015-10-22 07:37 PDT by Scott Bobertson
Modified: 2017-02-28 10:51 PST (History)
14 users (show)

See Also:

Attachments
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 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 ***