News for hackers. Stuff that matters.
Re:Brilliant use of CSS drop shadows by flog on Thursday February 17, 2011 @06:25AM (#2230564)
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 :)

Re:Brilliant use of CSS drop shadows by mickeyben on Thursday February 17, 2011 @06:57AM (#2230626)
Drop shadows are very slow when animated because they have to be recalculated every time they move.
Re:Brilliant use of CSS drop shadows by JonnieCache on Thursday February 17, 2011 @09:32AM (#2231011)
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 by bzbarsky on Thursday February 17, 2011 @01:46PM (#2232212)
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 by jquery on Thursday February 17, 2011 @05:13PM (#2233120)
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 by bzbarsky on Tuesday March 01, 2011 @12:28AM (#2274410)
It's not only that "fonts are hard" but that "the transformations people do to web pages are very different from the ones the GPU is good at", as I understand.

At which point we've reached the end of my second-hand graphics knowledge, unfortunately. I wish I could give you a better technical explanation here...

Re:Brilliant use of CSS drop shadows by jmtulloss on Friday February 18, 2011 @02:03AM (#2234565)
At palm, I didn't work on the 3d acceleration bits, but I worked with those that did. This explanation is pretty much spot on. In an environment where you don't already know your textures, 3d acceleration is a very difficult task. That's why only a select number of CSS transforms have been hardware accelerated to date.
Re:Brilliant use of CSS drop shadows by VMG on Friday February 18, 2011 @09:06AM (#2235411)
I doubt that text is a difficult problem for the GPU. Aside from the software stack and font format problem, you should be able to render text as vectors and put some antialiasing on it.
Re:Brilliant use of CSS drop shadows by bzbarsky on Thursday February 17, 2011 @01:48PM (#2232222)
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 by ciroduran on Thursday February 17, 2011 @10:21AM (#2231191)
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.
Re:Brilliant use of CSS drop shadows by vlod on Thursday February 17, 2011 @11:00AM (#2231363)
Re:Brilliant use of CSS drop shadows by JonnieCache on Thursday February 17, 2011 @11:36AM (#2231536)
>Using the GPU requires extra-integration and extra-work that most developers are not willing to do.

Once again, microsoft's decision to deliberately stagnate the browser market making life difficult for us all.

Re:Brilliant use of CSS drop shadows by chadgeidel on Thursday February 17, 2011 @11:46AM (#2231585)
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-...

Re:Brilliant use of CSS drop shadows by JonnieCache on Thursday February 17, 2011 @12:02PM (#2231677)
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.

Re:Brilliant use of CSS drop shadows by chc on Thursday February 17, 2011 @01:02PM (#2231982)
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 by notyourwork on Thursday February 17, 2011 @04:34PM (#2232961)
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 by MikeMakesIt on Thursday February 17, 2011 @06:41PM (#2233426)
This isn't relevant and as much as IE6 is a pain in the ass, it's time to get over it.
Re:Brilliant use of CSS drop shadows by alanh on Thursday February 17, 2011 @01:20PM (#2232084)
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 by NathanKP on Thursday February 17, 2011 @02:03PM (#2232302)
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 by Groxx on Thursday February 17, 2011 @01:51PM (#2232239)
Really? 9.0.597.98 seems to be scrolling smoothly on Win 7 here.
Re:Brilliant use of CSS drop shadows by blinkingled on Thursday February 17, 2011 @03:02PM (#2232563)
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 by notyourwork on Thursday February 17, 2011 @04:35PM (#2232965)
I have not noticed any issues with Chrome on my pro. Am I missing out on performance?
Re:Brilliant use of CSS drop shadows by blinkingled on Thursday February 17, 2011 @04:49PM (#2233020)
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... .

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 by notyourwork on Friday February 18, 2011 @07:56AM (#2235211)
I am running the 13" mbp and have not noticed anything out of the ordinary though now I am going to start using firefox for a few weeks and see how I feel.
Re:Brilliant use of CSS drop shadows by lurchpop on Friday February 18, 2011 @02:09AM (#2234582)
Same here. smooth on FF 3.5 and Chrome 9.0.9. windows safari 5.0 lagging though
Re:Brilliant use of CSS drop shadows by Khroma on Thursday February 17, 2011 @05:57PM (#2233280)
I'm on OSX 10.6 on an MBP too and it is slow on my Safari. It doesn't lag on FF4b11 though.
Re:Brilliant use of CSS drop shadows by Tyr42 on Saturday February 19, 2011 @10:50AM (#2239203)
I don't notice any lag in Opera 11
Re:Brilliant use of CSS drop shadows by derleth on Thursday February 17, 2011 @11:22PM (#2234213)
I'm running Chromium 9.0.597.94 (73967) (the one in the default Maverick repos) on Ubuntu 10.10 x86_64 and there's no lag on my system at all.

(Is the difference between Chrome and Chromium likely to be relevant?)

Re:Brilliant use of CSS drop shadows by xutopia on Thursday February 17, 2011 @08:48AM (#2230856)
It isn't just when animating. Scrolling a page when there is drop shadows is jittery.
Re:Brilliant use of CSS drop shadows by ilikepi on Thursday February 17, 2011 @02:55PM (#2232526)
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.

Re:Brilliant use of CSS drop shadows by splatcollision on Thursday February 17, 2011 @06:42AM (#2230603)
This is true in my experience. CSS shadows are awesome, but use with care when you're animating! I see a huge drop in framerate in my CSS animation tool when I have a big fat drop shadow on an element.
Re:Brilliant use of CSS drop shadows by antimatter15 on Thursday February 17, 2011 @07:05AM (#2230635)
I think recently Webkit got a fix for that.
Re:Brilliant use of CSS drop shadows by pohl on Thursday February 17, 2011 @10:58AM (#2231342)
Re:Brilliant use of CSS drop shadows by andrenotgiant on Thursday February 17, 2011 @10:55AM (#2231334)
Chrome for Mac was exceptionally bad at drop shadows last time I checked...
Re:Brilliant use of CSS drop shadows by duarte on Friday February 18, 2011 @03:28AM (#2234744)
Scrolls perfectly on my iPad.
Re:Brilliant use of CSS drop shadows by benihana on Thursday February 17, 2011 @03:06PM (#2232584)
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.