<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Flexbox content change triggers 250ms layout recalculation on new iMac (very fast on Chrome)"
href="https://bugs.webkit.org/show_bug.cgi?id=151579">151579</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Flexbox content change triggers 250ms layout recalculation on new iMac (very fast on Chrome)
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari 9
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Macintosh
</td>
</tr>
<tr>
<th>OS</th>
<td>Mac OS X 10.11
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>New Bugs
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>natewienert@gmail.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=266107" name="attach_266107" title="Profile">attachment 266107</a> <a href="attachment.cgi?id=266107&action=edit" title="Profile">[details]</a></span>
Profile
Don't have a limited test case, just the full site in production:
<a href="https://flintjs.com/?skipPassword">https://flintjs.com/?skipPassword</a>
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.</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>