Investigate performance problems

[arthurvr]

I was just looking at this site in Chrome on pretty good hardware and it's really really janky. Imagine what it is on mobile. Didn't have much time to investigate but just the moment the first images gets painted is already really painful:

That's no good. Just scrolling through the site made my chrome tab crash :/

As I said I didn't have much time to dig in but this can't be very good: (definitly not on images of 2400px wide)

background-image: radial-gradient(transparent, rgba(0, 0, 0, 0.8)), linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(#{styleguide['img_path']})

Just using will-change to force a new composite layer on .section-full-height already makes the FPS much better but there should be more we can do. Even then I see gigantic painful paint blocks when new images appear.

let's try to fix this :)

[kevinwuhoo]

Thanks for looking into this!

This has been an issue since I started prototyping it. Additionally, it's hard to get a decent mobile performance using this layout. There's actually an alternate layout I've been maintaining at http://kevinwuhoo.github.io/ui-styleguides/grid/ that actually side steps all of this and is easier to make mobile friendly as well!