Bug 151579

Summary: Flexbox content change triggers 250ms layout recalculation on new iMac (very fast on Chrome)
Product: WebKit Reporter: natewienert
Component: New BugsAssignee: Nobody <webkit-unassigned>
Status: RESOLVED INVALID    
Severity: Normal CC: hyatt, jonlee, mike.sherov, nemtsov, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 9   
Hardware: Mac   
OS: OS X 10.11   
Attachments:
Description Flags
Profile none

natewienert
Reported 2015-11-23 19:44:15 PST
Created attachment 266107 [details] Profile Don't have a limited test case, just the full site in production: https://flintjs.com/?skipPassword The header has a interval that is updating that text, as you can see. In Chrome it runs fine, I noticed on my iPhone it was running very slowly (and even on my Mac). Checked it out in profiler and got some huge graphs. Attaching image. As you can see for each character change it triggers over 200ms reflow. I know it's due to extensive use of Flexbox on the site, so I tried changing some of the header elements to use display:block;. What I found was that it seems to be doing a full body recalc! At least when I highlight over the layout, it highlights the full page. Beyond the bug report, what can I do to fix this without scrapping flexbox? Would be a shame given we've spent so much time on the site design so far.
Attachments
Profile (353.38 KB, image/png)
2015-11-23 19:44 PST, natewienert 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2015-11-30 08:58:28 PST
<rdar://problem/23688715>
Jon Lee
Comment 2 2016-12-15 17:04:47 PST
Nate, do you still have a copy of that website?
Yuriy Nemtsov
Comment 3 2017-02-16 15:09:49 PST
I'm seeing a very similar issue and am able to reproduce it in the following jsFiddle: https://jsfiddle.net/nemtsov/kgk1rrsz/ You can see the slowness when scrolling the rendered frame and also when pressing "- remove first". --- Safari 10.0 (11602.1.50.0.10) Mac 10.11.6
Yuriy Nemtsov
Comment 4 2017-02-16 16:04:14 PST
To add to the previous flexbox-only jsFiddle, here's a simplified (no-flexbox) one: https://jsfiddle.net/nemtsov/ad8a5ugz/
Simon Fraser (smfr)
Comment 5 2017-02-16 16:05:41 PST
That's just slow painting; nothing to do with flex box. Please file a new bug on it.
Yuriy Nemtsov
Comment 6 2017-02-16 16:35:02 PST
(In reply to comment #5) > That's just slow painting; nothing to do with flex box. Please file a new > bug on it. Filed it here: https://bugs.webkit.org/show_bug.cgi?id=168482 Thanks.
Jon Lee
Comment 7 2017-02-28 11:18:00 PST
Moving to invalid since we don't have access to the original site. Please check when b168657 makes it into the next STP. Feel free to re-open if the flex box performance issue persists.
Note You need to log in before you can comment on or make changes to this bug.