Here it’s more than a second and a half, and removing the hover effects has ZERO impact on the painfully slow scrolling if you put gradient on anything taller than 32pixels.
Out of curiosity, what’s your video specs and OS? I’m actually trying to narrow down where it works and where it doesn’t – a simple body { background:linear-gradient blah, blah, blah makes pages painful to the point of not wanting to use them on ALL of my machines in FF, but I’m hearing from other people it isn’t… About the only difference I’m finding is that it’s worse on linsux than it is in windblows, in OSuX you’ve got a good chance of crashing the browser, and for some reason SOME AMD/ATI video cards are immune to the problem. (pretty much anything labelled 6xxx HD)
Odd, they’re unrelated to the scrolling issues here which seem entirely tied to the box-shadows… doesn’t show the gradient problem though – but again just set a linear-gradient on body and try scrolling it. It’s renders the page useless. More of them you use, the worse it gets – sucks so much cpu that just hitting ‘page-down’ on my media center nettop in FF ends up taking around 20 seconds to respond (with windows saying FF is “not responding” for the latter half of that time). Admittedly that’s only a 1.6 Single core hyperthreaded Atom, but it’s got ION so there’s little excuse; especially when it’s fine in Chrome and Opera. (Kind of like how VLC and Netfix can’t play HD on it when Hulu and Media Player Classic handle it just fine)
Which is funny since the fourth number is the solid color – and one that any of the fancier effects (like the ones shown in some of the recent articles off site-points home page) rely upon. Solid color should be EASIER than blending, not harder.
Sorry, if that’s your idea of extreme…
But seriously:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<title>
Template Design CSS
</title>
<style type="text/css">
body {
background:#000; /* Old browsers */
background:-moz-linear-gradient(top,#F00,#000);
background:-webkit-linear-gradient(top,#F00,#000);
background:-o-linear-gradient(top,#F00,#000);
background:-ms-linear-gradient(top,#F00,#000);
background:linear-gradient(top,#F00,#000);
filter:progid:DXImageTransform.Microsoft.gradient(
startColorstr='#FF0000',
endColorstr='#000000',
GradientType=1
);
}
</style>
</head><body>
<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
</body></html>
Are you able to scroll that up and down smoothly? Because I sure as shine-ola can’t on any of my good machines… For some reason it runs great on my old P3 intel Express 2 dell laptop I keep in the garage; when my i7 desktop and T9400 laptop can’t handle it in FF… while every other browser that supports it runs just fine.
Still one ugly mess of code for background:#000 url(images/redToBlack.png); background-size:100% 100%; with that png being around 192 bytes… especially since unlike gradient, all modern browsers support it without those stupid malfing vendor prefixes. (even IE9) – legacy browsers just let the gradient fade to the black… oh noes, not that 
Seriously:
background:#000 url(images/redToBlack.png);
background-size:100% 100%;
73 bytes code + 192 byte image.
vs.
background:#800; /* Old browsers */
background:-moz-linear-gradient(top,#F00,#000);
background:-webkit-linear-gradient(top,#F00,#000);
background:-o-linear-gradient(top,#F00,#000);
background:-ms-linear-gradient(top,#F00,#000);
background:linear-gradient(top,#F00,#000);
filter:progid:DXImageTransform.Microsoft.gradient(
startColorstr='#FF0000',
endColorstr='#000000',
GradientType=1
);
402 bytes code…
Splitting hairs really on choice/method… excepting that the image version doesn’t drag geckotard browsers into the circles of hell on performance.
I have yet to see a page that uses the dynamic gradients, shadows or other effects that aren’t a buggy slow and annoying mess in FF unless you magically have that perfect combination of hardware it seems to want… said combination being from my experience brand spanky new ATI or decade out of date Intel…
What you shouldn’t do is use that extreme example as a reason never to use CSS3 text-shadow / gradients / box-shadows.