search

google / material-design-lite

Material Design Components in HTML/CSS/JS
https://getmdl.io
Apache License 2.0
32.28k stars 5.03k forks source link

Layout broken on scrolling #1110

Open ookami-kb opened 9 years ago

ookami-kb commented 9 years ago

MDL version: 1.0.0 Browser: Chrome Browser version: 43.0.2357.132 (64-bit) Operating system: Ubuntu Operating system version: 14.04 64-bit

What steps will reproduce the problem:

  1. Open/refresh page and start scrolling with a wheel before all scripts are loaded
  2. Very often layout is broken and screen is positioned incorrectly, so it's impossible to scroll to the top. Appears in Chrome, didn't succes to reproduce that in Firefox.

Resizing the window fixes this. Happens on getmdl.io too. ind7

kybarg commented 9 years ago

+1 Moreover I don't understand why to change layout with javascript. I m sure it is needed to change toolbar height while scrolling etc., but why is it used to wrap page content?

sgomes commented 9 years ago

Thanks, @ookami-kb, I'm able to reproduce this intermittently. I'll see if there's an easy solution to this that we can add to a revision release.

As for why we use JS to modify the layout, this has to do with adding all the necessary bits without requiring the user to code them all in, to save some developer effort (just like we don't require developers to add a ripple div to a button to make it have a ripple). This is a philosophy we should reevaluate when we start work on the next major version, though, as it may be causing some hard to debug issues.

henriquebarcelos commented 9 years ago

I'm with the same issue. Moreover, in Microsoft Edge the FPS of the page slows down to 10/15 due to MDL. Just remove it and you'll se it running at 60 FPS (smooth scrolling)

sem titulo

sgomes commented 9 years ago

@henriquebarcelos, could you open a separate issue for the performance problems in MS Edge? We'd love to get some more info on that, and it makes sense to track it separately. Thanks!

davidpelayo commented 9 years ago

Same happening to me:

MDL version: 1.0.4 Browser: Chrome Browser version: 45.0.2454.85 (64-bit) Operating system: Mac OS Operating system version: 10.10.5 (14F27)

tschiela commented 9 years ago

+1 same here on Chrome 45 @ Ubuntu

In my opinion, the layout should never be calculated by JS. Why is this done so? I dont get the reason.

sgomes commented 9 years ago

I'm now having trouble reproducing this, sadly, although I don't doubt the problem is still present. @surma @addyosmani Could you see if you have more luck in reproducing the issue? I'm hoping we can add a JS check or two to make sure things get triggered at the right time.

addyosmani commented 9 years ago

I think I was able to reproduce a few different stages of this by opting for the GPRS option in DevTools network throttling. As far as I can tell the cause is that (as suspected) we use JS for introducing the rest of the skeleton needed for layout. The odd thing is that I'm unable to repro the issues here if I simply disable all JS for the page. I would check how we're applying the updates to layout as there may be a race issue we're missing here.

ookami-kb commented 9 years ago

I suspect it has something to do with scrolling to top after the layout is upgraded.

Maybe it's some kind of bug in Chrome? I see that in latest version of Chrome the situation is slightly better: white background still appears, but is going normal on scrolling up/down with mouse.

One more thing: I've disabled smooth scrolling in chrome://flags and now it scrolls on layout upgrade without animation. With that flag disabled I can't reproduce that bug