On a hunch, I added `overflow: hidden` to cr-toolbar and the performance issue totally cleared up.

This is an acceptable workaround for us on MD History (

Uh, monorail ate my party popper emoji.

This is an acceptable workaround for us on MD History, but this still feels like a Blink issue which should be looked into.

Another update: <history-item> layout is also made a lot slower by this change, approximately doubling page load time.

This points to Stefan's change, which is odd because that should have made things *faster*

I have to do some digging into what the layout is doing, but for the time being, a workaround is:


diff --git a/chrome/browser/resources/md_history/history_list.html b/chrome/browser/resources/md_history/history_list.html
index b857e1b..b74747d 100644
--- a/chrome/browser/resources/md_history/history_list.html
+++ b/chrome/browser/resources/md_history/history_list.html
@@ -18,7 +18,6 @@
       }
 
       #infinite-list {
-        flex: 1;
         padding-top: var(--first-card-padding-top);
       }
 

Also, for the record, the point at which the performance flips between slow and fast is:

window.innerWidth = 1278  // slow
window.innerWidth = 1279  // fast

Hmm, there's some pretty wacky usage of flexbox in this page.  For example, why is history-list a column flexbox?  It's an infinite list.  Running flex layout on the history-list is actually the thing that's killing performance.  It's running column flex layout on a large number of offscreen history items, which is slow.

The page looks the same if history-list uses display:block and iron-list uses height:100%, but the performance problem goes away.

Following your suggestions, I made the following changes:

--- a/chrome/browser/resources/md_history/history_list.html
+++ b/chrome/browser/resources/md_history/history_list.html
@@ -12,14 +12,11 @@
   <template>
     <style include="shared-style">
       :host {
-        display: flex;
-        flex-direction: column;
-        position: relative;
+        display: block;
       }
 
       #infinite-list {
-        flex: 1;
-        padding-top: var(--first-card-padding-top);
+        height: 100%;
       }

Is this what you intended? With these changes applied, the animation jank is gone, but page load still has the major performance regression I mentioned in #3.

I'm not sure what is causing that -- Even going through and removing all of the flex layout from history-item and history-list doesn't fix the problem.

I've got a CL (https://codereview.chromium.org/2073703002/) which makes the changes above.

The load time regression still happens, but I only just noticed that it only happens below the 1279px breakpoint.

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/07a903c7055b1d2bf30d33f383c188418bc3cd50

commit 07a903c7055b1d2bf30d33f383c188418bc3cd50
Author: tsergeant <tsergeant@chromium.org>
Date: Wed Jun 22 02:19:33 2016

MD History: Simplify flex layout

MD History was using flexbox where it was not required, resulting in a
significant performance regression following  crbug.com/397888 . This CL
simplifies the layout to workaround this regression, replacing flex
layout with block layout in history.html, <history-app>, and
<history-list>. Also changes the amount of padding at the top of the
list, per feedback from UI.

BUG= 618153 
CQ_INCLUDE_TRYBOTS=tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2073703002
Cr-Commit-Position: refs/heads/master@{#401168}

[modify] https://crrev.com/07a903c7055b1d2bf30d33f383c188418bc3cd50/chrome/browser/resources/md_history/app.html
[modify] https://crrev.com/07a903c7055b1d2bf30d33f383c188418bc3cd50/chrome/browser/resources/md_history/app.js
[modify] https://crrev.com/07a903c7055b1d2bf30d33f383c188418bc3cd50/chrome/browser/resources/md_history/grouped_list.html
[modify] https://crrev.com/07a903c7055b1d2bf30d33f383c188418bc3cd50/chrome/browser/resources/md_history/history.html
[modify] https://crrev.com/07a903c7055b1d2bf30d33f383c188418bc3cd50/chrome/browser/resources/md_history/history_item.html
[modify] https://crrev.com/07a903c7055b1d2bf30d33f383c188418bc3cd50/chrome/browser/resources/md_history/history_item.js
[modify] https://crrev.com/07a903c7055b1d2bf30d33f383c188418bc3cd50/chrome/browser/resources/md_history/history_list.html
[modify] https://crrev.com/07a903c7055b1d2bf30d33f383c188418bc3cd50/chrome/browser/resources/md_history/history_list.js
[modify] https://crrev.com/07a903c7055b1d2bf30d33f383c188418bc3cd50/chrome/browser/resources/md_history/history_toolbar.html
[modify] https://crrev.com/07a903c7055b1d2bf30d33f383c188418bc3cd50/chrome/browser/resources/md_history/shared_style.html
[modify] https://crrev.com/07a903c7055b1d2bf30d33f383c188418bc3cd50/chrome/browser/resources/md_history/side_bar.html
[modify] https://crrev.com/07a903c7055b1d2bf30d33f383c188418bc3cd50/chrome/browser/resources/md_history/synced_device_manager.html

The CL in #10 works around all of the performance issues we were seeing in MD History.

However, I'm concerned that this will affect external websites as well. One of the iron-list demo pages [1], for example, exhibits the same sort of behavior in Chrome Dev. Devtools shows it spending 150ms in Rendering to lay out the iron list in 53.0.2767.4, compared to 41ms in 52.0.2743.41.

szager@, can you please have another look at this?

[1] https://elements.polymer-project.org/bower_components/iron-list/demo/selection.html

Deleted: Screenshot from 2016-06-22 16:57:28.png 58.2 KB

	Screenshot from 2016-06-22 16:57:28.png 58.2 KB View Download

Oh, I'm definitely looking at it; as a performance regression, this is totally unacceptable.  I just wanted to give you a way to work around it while I investigate further.