Basic animation unusually slow in non-IE browsers

Test page: http://adamhaskell.net/misc/dialogtest.html

Tested with: Internet Explorer 9, Firefox 6, Chrome 14

The page开发者_如何学运维 contains a stripped-down version of a site I'm working on. It uses a custom Alert function (uppercase A to keep the standard alert available). Essentially it creates a mask element and the alert content element, then fades them in using the opacity style.

The animation runs on a setInterval with a time delay of 25ms, over a total of 16 frames. The theoretical animation time, therefore, is 400ms.

Results:

• Internet Explorer 9: 397-403ms
• Firefox 6: 440-460ms
• Chrome 12: 800-900ms

And that's just the stripped-down, minimal version of the page.

Am I doing something wrong, or is Chrome, the "Internet's fastest browser," the bringer of "the Web, now," actually that crap?

So, I'll just move this here, since this turned out to be the issue:

It's not the animation - the animation ran just fine when I had the external CSS disabled, but it's the browser struggling to render the CSS3 properties (namely border-radius, background-size, and box-shadow in this case) over such a short period of time. Removing these should cause much more normal times to match your expected times.

Tested on Firefox 6:

• Before CSS: 400ms average, consistent
• After CSS: 600ms+ average, varying

Tested on Chrome (no control test):

• After CSS: 500-700ms, varying