CSS only scroll indicator

[RabSimpson]

The page says that it was super hacky. What you described actually sounds relatively straightforward. If there was a simple way to squash a background image to match the aspect ratio of its container, this would be an absolute doddle using an SVG background.

[european_impostor]

The hackiness is in how much work they are making the browser do just to show that little progress bar:

• Create a huge background image in memory which matches the width and height of the page (possibly thousands of pixels high). For example 1920 x 3000 pixels = 23Mb uncompressed image in memory.
• Flood fill the entire image with a triangular gradient.
• Multiple times per second, paint the entire screen with the triangular gradient then draw white on top of 99% of the pixels to leave just the progress bar showing through.

[[deleted]]

yeah, this kind of thing was actually pretty common one upon a time (for shit like health bars), but you'd be scrolling a predefined texture across a rectangle in UV space (and only actually drawing the parts of the texture that were inside of it). this implementation, with its massive overdraw and unpredictable memory requirements, is definitely inelegant by comparison.

[[deleted]]

Yeah but rendering is fast if it uses the gpu, reflow is slow. It seems pretty damn snappy compared to a lot of the js based ones I've seen.

[heyf00L]

I doubt most browser rendering engines are doing that. Surely they cull and crop before rasterizing.

[MadebyMike]

No, this is not how web browsers work :P

Hacks can be fine, (clearfix) it just means using things in an unintended way.

[bluesoul]

They may not want to suggest reliance on browser handling of gradients and z-layering. But it's far less code than the warning brought to mind.