davidtheclark/scut — pull request #130 by patocallaghan (2013-12-29 23:40:31+00:00)
Title: Performance enhancements to prevent crashes

So it turns out it mightn't have been **overthrow.js** at all.

I digged a little further into the crashing issue and I found that on desktop, when scrolling, the FPS were continuously maxing out at and above 60FPS (this would be 2x3 times on mobile). On resource-lacking devices this could potentially cause the browser to crash.

The primary cause was that both the `.list` and `.main` divs were both set to `position: absolute` which meant that the whole page was being repainted on scroll. I've reduced this a bit by doing the following:

* `.list` no longer uses `position: absolute`, now uses `position: fixed`.
* `.list` uses the translateZ hack to hoist it to the GPU for better FPS when scrolling
* `.main` no longer uses `position: absolute`, instead it is default position with `padding-left: 16em`.

If you do a before and after, measuring the frame rate on scroll you'll see it's a lot more respectable. You can read more about the background on this [here](http://www.smashingmagazine.com/2013/06/10/pinterest-paint-performance-case-study/)

A few things to note.

* I haven't actually been able to test this on my mobile device as I'm having issues getting it to see my local environment. I've only tested it in the browser
* I wasn't sure what you're preferred way of doing auto-prefixing CSS was, so I just input all the possible css values.