Remember to call your webkit filters on the parent element

DEMO

I’ve been playing with CSS3 transforms and filters lately, and wanted to point out a little ¬†“gotcha” if you’re working with javascript based animations of these effects.

I had a script that was placing “-webkit-filter” rules on individual elements, and realized it was really slowing things down. So I wrapped everything in a “<div>” tag and suddenly everything worked as intended. It’s because CSS ¬†filters can be applied to the contained elements within a parent faster than they can individually be assigned style rules by javascript.

Just something to rememeber, I put up a little demo of this here.

Leave a Reply

Your email address will not be published. Required fields are marked *