Live data from Hacker News

Brilliant use of CSS drop shadows

nicolasgallagher.com

41–50 of 61 posts

Re: Brilliant use of CSS drop shadows

#41
post #37
post #34

Earlier quoted context omitted.

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.

Yep, Chrome is far better on Windows than OS X. So long as I was using OS X on my MBP I couldn't use Chrome and kept going back to FF - but since switching the machine to Win 7 I can't not use Chrome.

Re: Brilliant use of CSS drop shadows

#43
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 can attest to this. I had a page with four dropped shadows and one div that is animated via jQuery's slideDown/slideUp methods. Sliding up and down was painfully slow and ragged.

Re: Brilliant use of CSS drop shadows

#44
post #31

Almost works in IE9, that's amazing in itself. But dead in IE8/7 of course. (via browserling) http://img29.imageshack.us/img29/4448/ie9corners.png Hmm, webpagetest shows it works completely in IE9 http://cdn.webpagetest.org/thumbnail.php?width=930&test=... maybe a later release

There was a recent update a few days ago. Check Windows Update.

Re: Brilliant use of CSS drop shadows

#46
post #33

Earlier quoted context omitted.

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.

Did said kid continue to cut you in 4th grade, 5th grade ..., nth grade before you entered college?

Re: Brilliant use of CSS drop shadows

#47
post #37

Earlier quoted context omitted.

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

Yep, Chrome is far better on Windows than OS X. So long as I was using OS X on my MBP I couldn't use Chrome and kept going back to FF - but since switching the machine to Win 7 I can't not use Chrome.

I have not noticed any issues with Chrome on my pro. Am I missing out on performance?

Re: Brilliant use of CSS drop shadows

#48

Earlier quoted context omitted.

Yep, Chrome is far better on Windows than OS X. So long as I was using OS X on my MBP I couldn't use Chrome and kept going back to FF - but since switching the machine to Win 7 I can't not use Chrome.

I have not noticed any issues with Chrome on my pro. Am I missing out on performance?

It may be specific to my MBP model (17" Core i7) which has the weirdo combination of Intel and Nvidia GPUs that are switched flakily in software at OSX's whim and Chrome has been known to trip the GPU switching - http://www.google.com/search?sourceid=chrome&ie=UTF-8&#3... .

Scrolling was very jittery in general and page rendering/painting was also slower. Not like molasses slow but definitely not acceptable for a Core i7 machine.

With Win 7 which uses only one GPU, the Nvidia one, it is very smooth and fast as I said - definitely wouldn't want to go back.

Re: Brilliant use of CSS drop shadows

#49

Earlier quoted context omitted.

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…

I find this answer unsatisfying. Watch this demo, for example. It runs on high-end modern gaming PCs over 60 FPS.

http://www.google.com/url?sa=t&source=web&cd=4&v...

Tesselation, volumetric shadows, depth of field, etc. Can you really say with a straight face that it's not doing anything complicated? And here we are struggling with drop-shadows. I know the problem domains are different, but I can't help but feel completely underwhelmed at the current state of the web when it comes to graphics. Somehow I think there's more to it than "fonts are hard."

Re: Brilliant use of CSS drop shadows

#50
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).

I'm on OSX 10.6 on an MBP too and it is slow on my Safari. It doesn't lag on FF4b11 though.
Post reply on HN