I opened an issue in Chrome. (It should be public soon https://code.google.com/p/chromium/issues/detail?id=514303)
tl;dr It's not an issue in Chrome, indeed, Chrome doesn't do composited overflow scrolling traditionally for non-retina outputs because those outputs need LCD text. That's why you see that large paint rectangle. After talking to some folks, the paint might not be as bad as it looks like since some of those are optimized. I'd say that we should pay attention to the FPS meter as it gives a better picture of how many frames per second we ship. Your drawer-panel example runs at nearly 60fps even though we get that big paint region. Thanks On Monday, July 27, 2015 at 12:23:15 PM UTC-7, Aleem Mawani wrote: > > Thanks for looking into that. > > On Mon, Jul 27, 2015 at 12:11 PM Emmanuel Garcia <[email protected] > <javascript:>> wrote: > >> I have confirmed this issue. It seems like a regression in chrome that >> can be reproduced in a non-retina display screen by just adding *overflow: >> auto. *Here's an example: http://jsbin.com/midoga/edit?html,output . I >> will keep you posted as we find out more. >> >> >> >> On Monday, July 27, 2015 at 9:09:33 AM UTC-7, [email protected] wrote: >> >>> So all sites that use polymer drawers will have slow scroll perf because >>> the main content section always repaints? >>> >>> On Saturday, July 25, 2015 at 7:21:57 AM UTC-7, Aleem Mawani wrote: >>> >> Non-retina macbook air 13" >>>> >>>> On Sat, Jul 25, 2015 at 7:21 AM Eric Bidelman <[email protected]> wrote: >>>> >>> Are you on a retina machine? If not what kind? If you're on a Mac that's >>>>> likely the difference. Chrome has a different rendering path on retina >>>>> vs. >>>>> non-retina screens. >>>>> >>>>> On Fri, Jul 24, 2015, 8:21 PM <[email protected]> wrote: >>>>> >>>>>> Hmmm. Attached video showing repaints. and screenshot of me being on >>>>>> chrome 44 >>>>>> >>>>>> On Friday, July 24, 2015 at 5:09:32 PM UTC-7, Frankie Fu wrote: >>>>>> >>>>>>> I tried your minimal example and when I scrolled the content I >>>>>>> didn't see the repaint on the entire content that you mentioned. I >>>>>>> was testing the latest paper-drawer-panel on Chrome 44. >>>>>>> >>>>>> On Fri, Jul 24, 2015 at 3:10 PM, Aleem Mawani <[email protected]> >>>>>>> wrote: >>>>>>> >>>>>> Thanks for the clue - looking at the dev tools, you're correct that >>>>>>>> the bad scrolling perf is coming from excessive paints. Turning on >>>>>>>> "show >>>>>>>> paint rectangles" I was able to narrow it down to the >>>>>>>> paper-drawer-panel's >>>>>>>> main content that was creating the issue. Here is a mimal example that >>>>>>>> shows that the main content pain will repaint its entire contents >>>>>>>> during >>>>>>>> scrolling. Seems like an issue with the paper-drawer-panel? >>>>>>>> >>>>>>>> <!DOCTYPE html> >>>>>>>> <html> >>>>>>>> <head> >>>>>>>> <script >>>>>>>> src="/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> >>>>>>>> >>>>>>>> <link rel="import" >>>>>>>> href="/bower_components/paper-drawer-panel/paper-drawer-panel.html"> >>>>>>>> >>>>>>>> <style> >>>>>>>> .maincontent { >>>>>>>> background: #cf9a9a; >>>>>>>> overflow: auto; >>>>>>>> } >>>>>>>> >>>>>>>> .sidebar { >>>>>>>> background: white; >>>>>>>> } >>>>>>>> </style> >>>>>>>> </head> >>>>>>>> <body> >>>>>>>> <paper-drawer-panel> >>>>>>>> <div class="sidebar" drawer> >>>>>>>> </div> >>>>>>>> >>>>>>>> <div class="maincontent" main > >>>>>>>> <div style="height:4000px"></div> >>>>>>>> </div> >>>>>>>> >>>>>>>> </paper-drawer-panel> >>>>>>>> >>>>>>>> </body> >>>>>>>> </html> >>>>>>>> >>>>>>>> If you load that you'll see that the maincontent div will always >>>>>>>> repaint in its entirety. >>>>>>>> >>>>>>> On Fri, Jul 24, 2015 at 2:30 PM Eric Bidelman <[email protected]> >>>>>>>> wrote: >>>>>>>> >>>>>>> Scrolling issues usually means poort interactions with css selectors >>>>>>>>> and style recalcs are causing large paints. That would be my guess. >>>>>>>>> That >>>>>>>>> doesn't have to do with templating or data binding but it's hard to >>>>>>>>> say >>>>>>>>> without seeing your app or knowing more about the code. >>>>>>>>> >>>>>>>>> Another thing to try is use <template is="dom-if"> to only stamp >>>>>>>>> initial DOM that you need. I've seen people create apps with >>>>>>>>> 5000-7000 DOM >>>>>>>>> nodes on page load. There's never a good idea for any app. >>>>>>>>> >>>>>>>>> On Fri, Jul 24, 2015 at 4:22 PM Aleem Mawani <[email protected]> >>>>>>>>> wrote: >>>>>>>>> >>>>>>>> Thanks for those. >>>>>>>>>> >>>>>>>>>> Are there any polymer specific perf issues we should be aware of >>>>>>>>>> with respect to data binding or templating? If there are perf issues >>>>>>>>>> in >>>>>>>>>> this area, would they be relatively easy to spot in the devtools? >>>>>>>>>> >>>>>>>>>> On Fri, Jul 24, 2015 at 2:20 PM Eric Bidelman <[email protected]> >>>>>>>>>> wrote: >>>>>>>>>> >>>>>>>>> As with any web app, the Devtools Timeline is your best friend >>>>>>>>>>> when it comes to anything related to jank (rendering, scrolling, >>>>>>>>>>> paint >>>>>>>>>>> issues): https://developer.chrome.com/devtools/docs/timeline >>>>>>>>>>> >>>>>>>>>>> The usual suspects are large paints on scrolling or doing extra >>>>>>>>>>> work (layout, etc). Be sure to turn on "Show paint" rects to see >>>>>>>>>>> where your >>>>>>>>>>> time is being spent: >>>>>>>>>>> https://developer.chrome.com/devtools/docs/rendering-settings >>>>>>>>>>> >>>>>>>>>>> There's also a ton of great content at http://jankfree.org/ to >>>>>>>>>>> learn more. >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> On Fri, Jul 24, 2015 at 3:33 PM <[email protected]> wrote: >>>>>>>>>>> >>>>>>>>>>>> I'm writing a Polymer based app and at some point the UI has >>>>>>>>>>>> gotten really slow to render and really slow to scroll. >>>>>>>>>>>> >>>>>>>>>>>> Does anyone know of any resources or tips on the best way to >>>>>>>>>>>> get started debugging polymer performance issues? >>>>>>>>>>>> >>>>>>>>>>>> Follow Polymer on Google+: >>>>>>>>>>>> plus.google.com/107187849809354688692 >>>>>>>>>>>> --- >>>>>>>>>>>> >>>>>>>>>>> You received this message because you are subscribed to the >>>>>>>>>>>> Google Groups "Polymer" group. >>>>>>>>>>>> >>>>>>>>>>> To unsubscribe from this group and stop receiving emails from >>>>>>>>>>>> it, send an email to [email protected]. >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>>> To view this discussion on the web visit >>>>>>>>>>>> https://groups.google.com/d/msgid/polymer-dev/74af7c92-213c-4bf1-b3fd-30e3f895ee1e%40googlegroups.com >>>>>>>>>>>> >>>>>>>>>>>> <https://groups.google.com/d/msgid/polymer-dev/74af7c92-213c-4bf1-b3fd-30e3f895ee1e%40googlegroups.com?utm_medium=email&utm_source=footer> >>>>>>>>>>>> . >>>>>>>>>>>> For more options, visit https://groups.google.com/d/optout. >>>>>>>>>>>> >>>>>>>>>>> Follow Polymer on Google+: >>>>>>>> plus.google.com/107187849809354688692 >>>>>>>> --- >>>>>>>> You received this message because you are subscribed to the Google >>>>>>>> Groups "Polymer" group. >>>>>>>> >>>>>>> To unsubscribe from this group and stop receiving emails from it, >>>>>>>> send an email to [email protected]. >>>>>>>> >>>>>>> To view this discussion on the web visit >>>>>>>> https://groups.google.com/d/msgid/polymer-dev/CADBYpym5hR8p3oKuxEj3Zb_RuGTQ7i4GksNjKkvhGCi-kBXaGg%40mail.gmail.com >>>>>>>> >>>>>>>> <https://groups.google.com/d/msgid/polymer-dev/CADBYpym5hR8p3oKuxEj3Zb_RuGTQ7i4GksNjKkvhGCi-kBXaGg%40mail.gmail.com?utm_medium=email&utm_source=footer> >>>>>>>> . >>>>>>>> >>>>>>>> For more options, visit https://groups.google.com/d/optout. >>>>>>>> >>>>>>> Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/b55771ef-fed5-4b26-944e-f20c25a14baf%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
