So you think you know box shadows?
An experimental deep dive into abusing CSS `box-shadow` for complex graphics and animations has impressed many developers, while also highlighting how impractical these techniques are for production due to performance and accessibility concerns. Commenters compare behavior across browsers and devices—often smooth in Chrome and Firefox but choppy in Safari—and use the example to explore how GPUs handle transparency, overdraw, and compositing in modern rendering engines. The thread also touches on more suitable tools like canvas and WebGL, and evokes nostalgia for earlier eras of creative, purely-for-fun web experiments.
Performance and Browser Differences
- Many commenters report the demos run “butter smooth” on a range of hardware: old AMD desktops, mid‑range Android phones, recent MacBooks, and various Pixels/Samsungs.
- Several report serious issues on Safari (Mac and iPad): slideshow‑like frame rates, freezing, and loss of scrolling, even on high‑end iPads.
- On some M2/M3 Macs, Firefox struggles with certain animations while Chrome runs smoothly.
- Overall theme: performance is excellent in many environments but fragile across browsers, with Safari most often blamed.
GPU Rendering, Transparency, and Overdraw
- Discussion explains that transparency complicates GPU batching: opaque draws can use depth buffering and arbitrary ordering, while transparent draws require correct painter’s order.
- Overdraw is highlighted as the main cost: transparent rendering often processes many pixels that end up partially or fully obscured.
- Memory bandwidth on mobile devices is flagged as a key limit, especially when transparency forces repeated framebuffer reads/writes.
- Some contrast browser engines with game engines: browsers try to minimize re‑rasterization and layer count, whereas games redraw everything each frame and can assume full hardware control.
Alternatives: Canvas and Other Techniques
- Several note that everything in the article could be done more easily and efficiently with
<canvas>or WebGL. - Others argue box‑shadow is used here precisely because it’s absurd and funny, not because it’s practical.
- Canvas is called out as faster but worse for accessibility and more suited to fixed‑size regions.
Rounded Rectangles and SDFs
- Commenters connect the “cheap rounded boxes” remark to signed distance fields and classic rounded‑rect hacks from early GUI systems.
- Modern shader‑based approaches for fast rounded rectangle shadows are referenced.
Accessibility and Practical Use
- Multiple voices stress that such heavy box‑shadow usage should not be used in production; it can cause lag and resource waste.
- Canvas and complex box‑shadow UIs are both seen as weak from an accessibility standpoint.
Cultural, Nostalgic, and Personal Reactions
- Many express strong enthusiasm for the creativity and “impractical hacking,” likening it to early‑2000s web experiments.
- Some reminisce about Winamp visualizers and lament that modern streaming players lack similarly rich visual experiences.
- A side discussion touches on learning graphics/GPU programming later in a career, trade‑offs between “fun” game work and better‑paid CRUD work, and the tension between “building the future” and valuing personal time.