Live data from Hacker News

Brilliant use of CSS drop shadows

nicolasgallagher.com

11–20 of 61 posts

Re: Brilliant use of CSS drop shadows

#11
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 think recently Webkit got a fix for that.

Re: Brilliant use of CSS drop shadows

#12

Nice. Which browsers does it work in? Firefox 3.6 works, IE7 doesn't. Not tested other versions of IE.

It works in latest versions of all browsers, including IE9 Beta where it's almost perfect - don't have the RC at hand to try, but hopefully it improves the few glitches I'm seeing.

The good thing is that in IE<9, it just shows a white box. But it's still perfectly readable and usable, it just looks less fancy, which is an acceptable loss in some cases.

Re: Brilliant use of CSS drop shadows

#14
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 :)

It isn't just when animating. Scrolling a page when there is drop shadows is jittery.

Re: Brilliant use of CSS drop shadows

#16
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 :)

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?

Re: Brilliant use of CSS drop shadows

#18
post #13

Nice. Which browsers does it work in? Firefox 3.6 works, IE7 doesn't. Not tested other versions of IE.

I fired up a VM with Windows XP with IE8, that's how it looks there: http://ge.tt/4bP3tEZ/ie8.png Firefox 3.6 and Chrome all good though.

My first thought was that it would suck in IE. The effects don't work, but at least they degrade gracefully unlike other CSS tricks.

Re: Brilliant use of CSS drop shadows

#19

Nice. Which browsers does it work in? Firefox 3.6 works, IE7 doesn't. Not tested other versions of IE.

Ran this on my Droid X:

Works on the defualt browser,

Works on the Opera Mobile brwoser,

Works on the Firefox browser.

So my mobile phone has better CSS rendering then my desktop IE8. Go figure.

Re: Brilliant use of CSS drop shadows

#20

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?

Because these calculations are done on software, not GPU. GPU programming is hard. Using the GPU requires extra-integration and extra-work that most developers are not willing to do.
Post reply on HN