Hacker News new | ask | show | jobs
CSS filters, GIFs, and performance (medium.com)
75 points by geelen 4731 days ago
7 comments
kryten 4731 days ago
Appears to be another "the whole world uses Google Chrome" bits of advice.

I bet other browsers have different performance profiles if this even works...

link
thezilch 4731 days ago
Only 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#Brow...

link
davidjohnstone 4731 days ago
I'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".
link
viraptor 4731 days ago
Latest released FF (from arch) didn't have any problems handling the page. It was quite smooth, but I didn't check the detailed profile.
link
kalleboo 4731 days ago
But 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.
link
viraptor 4730 days ago
It's definitely blurred. Not sure if it's from the filter, or just a specific way that FF does upscaling.
link
thezilch 4731 days ago
FF does not support any of three filters nor many others.
link
jstsch 4731 days ago
Why not simply have a bunch of JPEG's and animate through those? Something like Javascript-powered MJPEG. GIF is awful for animations.
link
mankyd 4731 days ago
You'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.

link
lnanek2 4731 days ago
Really hate the transitions on those slides. I read a lot faster than that, so they are forcing me to read slow, basically.
link
lgray 4730 days ago
The 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.

link
dan1234 4731 days ago
24MB of GIFs… I hope the author has a generous bandwidth allowance.
link
CognitiveLens 4730 days ago
something like CloudFlare CDN would probably make this a non-issue - the actual host would get very few hits.
link
brokentone 4730 days ago
Still have to pay someone for bandwidth
link
Nekorosu 4731 days ago
Definitely one of the best CSS tricks I've learned this year.
link
seferphier 4731 days ago
that is pretty cool. don't understand why he put other gifs that increases the size of the site.
link
dhotson 4731 days ago
Love this. Cool hack!
link