[Webkit-unassigned] [Bug 151579] New: Flexbox content change triggers 250ms layout recalculation on new iMac (very fast on Chrome)

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=151579

            Bug ID: 151579
           Summary: Flexbox content change triggers 250ms layout
                    recalculation on new iMac (very fast on Chrome)
    Classification: Unclassified
           Product: WebKit
           Version: Safari 9
          Hardware: Macintosh
                OS: Mac OS X 10.11
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: New Bugs
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: natewienert at gmail.com

Created attachment 266107
  --> https://bugs.webkit.org/attachment.cgi?id=266107&action=review
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.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.webkit.org/pipermail/webkit-unassigned/attachments/20151124/771b3c12/attachment-0001.html>