Material chrome://history scrolls at 15fps on a MBP due to drop-shadow filters. |
||||
Issue descriptionGoogle Chrome 54.0.2839.0 (Official Build) canary (64-bit) Revision 911ba12253b14bfe874a321c57031f5ac534ce31-refs/heads/master@{#414243} OS Mac OS X This is on my Retina MBP. What steps will reproduce the problem? (1) Load chrome://history (2) Open the devtools. (3) Click Timeline. (4) Click record button. (5) Scroll up and down 1px a few times. You'll see the devtools show a red warning line above nearly every frame of scrolling, and it takes 30-150ms per frame. The time is spent in the GPU process. Now open the devtools console, do: document.querySelectorAll("* /deep/ #infinite-list").forEach((e) => { e.style.filter = "none" }) Now repeat the steps above and look at the trace. You'll now get 60fps scrolling and the history page feels massively better. I've attached a test case that minimally shows what's causing this, the rule in the code is: https://chromium.googlesource.com/chromium/src/+blame/master/chrome/browser/resources/md_history/shared_vars.html --card-container-filter: { filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .05)) drop-shadow(0 1px 0px rgba(0, 0, 0, .08)) drop-shadow(0 1px 1px rgba(0, 0, 0, .2)); }; and then the iron-list has the id #infinite-list, the CSS specifies #infinite-list { filter: var(--card-container-filter) } https://cs.chromium.org/chromium/src/chrome/browser/resources/md_history/history_list.html?q=%22--card-container-filter%22&sq=package:chromium&dr=C&l=17 drop-shadow is a per pixel blur effect that's incredibly expensive and is applied on every nested layer on scroll. See the attached test case for a minimal example of what history is doing. History probably wants to use box-shadow instead which can be pre-computed and doesn't require a per pixel blur on every scroll.
,
Aug 26 2016
,
Aug 26 2016
This is a bummer. I specifically spent a bunch of time trying to trace scroll performance before this landed (https://codereview.chromium.org/2206363003#msg8), so I'm annoyed this slipped through. We haven't found any way to make box-shadow work for us (see https://bugs.chromium.org/p/chromium/issues/detail?id=616676#c3), so we might end up having to remove the shadows entirely.
,
Aug 26 2016
Actually, I can see why we didn't pick this up in code review: it's very hard to tell that anything is wrong on my Z620. One of the attached traces is R411283, the other is R411284, but they're almost indistinguishable. Regardless, it's very clear on my Chromebook Pixel that the filter is a problem.
,
Aug 26 2016
So changing to a box-shadow doesn't seem to have too many visual artifacts. The issues with the overlapping shadow have been mostly fixed by other hacks to make the filter work so this is probably going to be fine. You can see some shadow overlap at 500%, but otherwise, it's not too noticeable.
,
Sep 7 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/986a0334a792a32a5dac3d72c0edfbaceeeff0c7 commit 986a0334a792a32a5dac3d72c0edfbaceeeff0c7 Author: calamity <calamity@chromium.org> Date: Wed Sep 07 00:56:02 2016 [MD History] Use box-shadow to render card shadows everywhere. This CL changes the filter that was used to render the shadow on the history list into a box shadow to fix scrolling performance on various systems. It was also necessary to add a clipping div around the background so that the shadow wouldn't render over other items. BUG= 641223 CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation Review-Url: https://codereview.chromium.org/2278383002 Cr-Commit-Position: refs/heads/master@{#416807} [modify] https://crrev.com/986a0334a792a32a5dac3d72c0edfbaceeeff0c7/chrome/browser/resources/md_history/app.vulcanized.html [modify] https://crrev.com/986a0334a792a32a5dac3d72c0edfbaceeeff0c7/chrome/browser/resources/md_history/grouped_list.html [modify] https://crrev.com/986a0334a792a32a5dac3d72c0edfbaceeeff0c7/chrome/browser/resources/md_history/history_item.html [modify] https://crrev.com/986a0334a792a32a5dac3d72c0edfbaceeeff0c7/chrome/browser/resources/md_history/history_list.html [modify] https://crrev.com/986a0334a792a32a5dac3d72c0edfbaceeeff0c7/chrome/browser/resources/md_history/shared_vars.html [modify] https://crrev.com/986a0334a792a32a5dac3d72c0edfbaceeeff0c7/chrome/browser/resources/md_history/synced_device_card.html
,
Sep 7 2016
^ to summarise what we talked about in the MD History sync, we're seeing some minor visual artifacts on different systems with #7. We're landing it anyway to try and determine if it's noticeable on systems in the wild
,
Sep 7 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/6388b195d078e2068cb86191f589693cf7a51bae commit 6388b195d078e2068cb86191f589693cf7a51bae Author: calamity <calamity@chromium.org> Date: Wed Sep 07 06:55:41 2016 [MD History] Move background-clip div behind items. This CL fixes an issue where links in history couldn't be clicked because the invisible background clip was covering it. BUG= 641223 CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation Review-Url: https://codereview.chromium.org/2310423002 Cr-Commit-Position: refs/heads/master@{#416868} [modify] https://crrev.com/6388b195d078e2068cb86191f589693cf7a51bae/chrome/browser/resources/md_history/app.vulcanized.html [modify] https://crrev.com/6388b195d078e2068cb86191f589693cf7a51bae/chrome/browser/resources/md_history/history_item.html
,
Sep 23 2016
Marking this as fixed, scrolling performance is restored and I haven't seen any shadow artifacts. |
||||
►
Sign in to add a comment |
||||
Comment 1 by esprehn@chromium.org
, Aug 26 2016