Live data from Hacker News

Brilliant use of CSS drop shadows

nicolasgallagher.com

31–40 of 61 posts

Re: Brilliant use of CSS drop shadows

#33

Earlier quoted context omitted.

Wait, when did MS prevent other browser manufacturers from including hardware-accelerated rendering? Also - to specifically counter your point IE9 will have hardware accelerated rendering via Direct2D: http://blogs.msdn.com/b/ie/archive/2009/11/18/an-early-look-...

They actually completely stopped development on IE between version 6 and 7. There was no IE dev team, beyond people patching bugs. Obviously this did not prevent other people doing GPU-acceleration, but the leading player deliberately halting development will and did cause the market to stagnate.

That's not really relevant to the issue at hand, though. Bringing up Microsoft's misbehavior with IE 6 in this context is like bringing up the time a kid cut in front of you for lunch in third grade when you meet him in college.

Re: Brilliant use of CSS drop shadows

#34
post #2

I use these with caution on animated pages or large elements; I don't have links to hand, but have lots of anecdotal stories of performance degradation with CSS drop shadows. Just a friendly word of (unbacked) warning to frontend devs :)

Indeed, simply scrolling this demo page in Chrome 9 feels very laggy. Edit: OS X, late 2009 MBP, BUT with the BetterHN tab/iframe on top (other pages are smooth though).

Re: Brilliant use of CSS drop shadows

#35

Earlier quoted context omitted.

Drop shadows are very slow when animated because they have to be recalculated every time they move.

The fact that you are correct is laughable in this age of GPUs commonly having 512mb+ of dedicated RAM. Think what the latest game engines can do at 60fps, why oh why do our browsers still sweat over a few alpha channels in 2011? EDIT: My galaxy S phone runs Quake 3 at 60fps, flawlessly. MY PHONE RUNS QUAKE 3! Why can't my browser do alpha blending at more than 10fps?

Games do pretty simple things on the GPU. Download textures, then transform them. They do a _lot_ of it, but conceptually the operations are not actually all that complicated or varied, by and large.

Browsers have this little thing they have to deal with called "text". Turns out that stuffing reasonable text into a texture and then scrolling it, say, is not something GPUs can do a good job of. This is why games just bitmap all their text and it looks like crap, by the way. I doubt you'd want text in a browser to look like it does in most games.

Browsers are working on making this faster, by the way. But it also turns out that not only are GPUs designed around stuff that games do (which is not the same set of stuff that browsers need done), but so are graphics drivers. The parts of them that Firefox 4 has been trying to use are clearly undertested, because they're ... rather buggy. Which is why there's now a driver blacklist (whitelist on Linux) and so forth...

Re: Brilliant use of CSS drop shadows

#36

Earlier quoted context omitted.

Drop shadows are very slow when animated because they have to be recalculated every time they move.

The fact that you are correct is laughable in this age of GPUs commonly having 512mb+ of dedicated RAM. Think what the latest game engines can do at 60fps, why oh why do our browsers still sweat over a few alpha channels in 2011? EDIT: My galaxy S phone runs Quake 3 at 60fps, flawlessly. MY PHONE RUNS QUAKE 3! Why can't my browser do alpha blending at more than 10fps?

One other thing. The expensive thing with shadows is not just the compositing, but recomputing the shadow itself. Any time something changes about the thing that's casting the shadow you have to rebuild the shadow. If the change is of a kind the GPU knows about (polygon moved or rotated or whatnot), it might be doable on the GPU. If it's something like "the width changed and the text layout has to be redone", you lose.

Re: Brilliant use of CSS drop shadows

#37
post #34
post #2

I use these with caution on animated pages or large elements; I don't have links to hand, but have lots of anecdotal stories of performance degradation with CSS drop shadows. Just a friendly word of (unbacked) warning to frontend devs :)

Indeed, simply scrolling this demo page in Chrome 9 feels very laggy. Edit: OS X, late 2009 MBP, BUT with the BetterHN tab/iframe on top (other pages are smooth though).

Really? 9.0.597.98 seems to be scrolling smoothly on Win 7 here.

Re: Brilliant use of CSS drop shadows

#38
post #34
post #2

I use these with caution on animated pages or large elements; I don't have links to hand, but have lots of anecdotal stories of performance degradation with CSS drop shadows. Just a friendly word of (unbacked) warning to frontend devs :)

Indeed, simply scrolling this demo page in Chrome 9 feels very laggy. Edit: OS X, late 2009 MBP, BUT with the BetterHN tab/iframe on top (other pages are smooth though).

Also in Safari scroll is laggy. Apparently webkit is redrawing the shadows every time. I actually made shadows very similar to these for one of my web apps but didn't end up using them because it made scrolling laggy.

Re: Brilliant use of CSS drop shadows

#40
post #2

I use these with caution on animated pages or large elements; I don't have links to hand, but have lots of anecdotal stories of performance degradation with CSS drop shadows. Just a friendly word of (unbacked) warning to frontend devs :)

I'm seeing an interesting effect on OS X Leopard with Safari 5. If I bring another program to the foreground on top of the Safari window, and then switch back to Safari, only the shadows and background color appear. It takes a second or so for the white boxes and text to appear, as well as the chrome around the top portion of the window.

This was repeatable several times at first, but now it's become intermittent. It takes me back to the days of tweaking settings in X-Windows, when there was a "saveunder" setting that would specify whether to retain the contents of a window in memory when it became obscured by another window.

Post reply on HN