Faster scanlines in docs header

[mzgoddard]

• Translate scanlines instead of background-position

background-position causes redraws for pretty big areas for every frame. Using translate instead removes all draws as all browsers now use 3d transforms to move layers and composite together in the final render. Safari is crazy fast here.

[kadamwhite]

Gifs are an admittedly horrible way to show this difference, but the flicker on the new styles seems slightly faster and more wave-y (probably a side-effect of reducing the re-paints, it actually is faster now):

Before:

After:

This I consider a Good Thing, I think it's visually improved.

The only issue I see is that, on small screens (I'm assuming it's the overflow change that did this) the scanline extends far beyond the bounds of the header image, and can be seen lurking down below in the nav area:

[mzgoddard]

Super good catch. It was the line's transform being relative to itself instead of the window and how tall the scan'd area actually is.

[kadamwhite]

Still slightly extends below the header on small screens (600px or narrower); we can look at it tomorrow. If this takes more than 30min we should be satisfied with what we have and focus on the #72

[mzgoddard]

Added overflow: hidden back. Seems I overreacted to overflow. I can't see a performance difference between using it and not.

[mzgoddard]

@kadamwhite this should be ready to ship.

[kadamwhite]

Looks good, sounds good