5 ms·
CSS filters, GIFs, and performance
- Nekorosu 13y agoDefinitely one of the best CSS tricks I've learned this year.
- seferphier 13y agothat is pretty cool. don't understand why he put other gifs that increases the size of the site.
- kryten 13y agoAppears to be another "the whole world uses Google Chrome" bits of advice. I bet other browsers have different performance profiles if this even works...
- davidjohnstone 13y agoI'd take you up on that bet — the blur filter is always going to be computationally expensive given that has to do Gaussian blur according to the spec. There are faster ways to blur, but they're not as "good".
- thezilch 13y agoOnly Chrome (or webkit-based) support [0], and like the other poster said, blur will be slow unless harnessing the GPU. [0] https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Browser_compatibility https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Brow...
- viraptor 13y agoLatest released FF (from arch) didn't have any problems handling the page. It was quite smooth, but I didn't check the detailed profile.
- kalleboo 13y agoBut is it applying the (slow) CSS blur filter? The article claims the filter is currently only supported by WebKit. Of course it'll render fast if it's not actually rendering anything.
- viraptor 13y agoIt's definitely blurred. Not sure if it's from the filter, or just a specific way that FF does upscaling.
- thezilch 13y agoFF does not support any of three filters nor many others.
- dhotson 13y agoLove this. Cool hack!
- dan1234 13y ago24MB of GIFs… I hope the author has a generous bandwidth allowance.
- CognitiveLens 13y agosomething like CloudFlare CDN would probably make this a non-issue - the actual host would get very few hits.
- brokentone 13y agoStill have to pay someone for bandwidth
- jstsch 13y agoWhy not simply have a bunch of JPEG's and animate through those? Something like Javascript-powered MJPEG. GIF is awful for animations.
- mankyd 13y agoYou're probably right, though says in the article "I wanted to do the same thing, but without all that work." In other words, he has an animated gif and wanted to try some quick css trickery to get the effect.
- lnanek2 13y agoReally hate the transitions on those slides. I read a lot faster than that, so they are forcing me to read slow, basically.
- lgray 13y agoThe typography keeps throwing me off too. The process is: Bugs Strict mode didn't know existed That doesn't make sense. Oh wait, there are little words between each of those lines.