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] >> <javascript:>> 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] <javascript:>> 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/fa131e4e-d61f-4725-acc6-b8be1ae808de%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
