I WANT THIS! NOW!

Awesome dude!

Thank you man !

Awesome!

Really useful if you work for the NSA like I do!

Thanks Stefan :D

Oh yes, sorry :D

Fucking awesome!

Yeah I know and it's freaking me out. I already use the attribute preload="auto" of the <audio>-element, but it's not enough.

Do you know any better ways to preload it?

I'm assuming there's an event for when the audio is loaded... maybe hook up the animation to that?

canplaythrough

So what do you suggest I should change?

Thanks in advance.

Well in CSS you can't do anything about it, that's just how the browser works.

If you'd be doing WebGL you can do some things like using square power of two textures and enabling mipmapping and if available anisotropic filtering.

You can also do things like using signed distance field fonts or draw fonts by rasterizing (in the fragment shader) the bezier curves, which can be made to nicely anti-alias (using standard derivatives).

Is this to say that CSS 3D transformations on text are bound to be aliased [in similar circumstances]? Is there a suggestion to the spec such as a "mipmap hint" that could (one day) be added to reduce this flaw without the need for other technologies?

It's not just 3D transforms, a simple scale down will exhibit aliasing as well.

There's no flag to control aliasing migitating strategies for CSS in the spec, nor is there any discussion about it as far as I know.

We call this a leaky abstraction :)

> draw fonts by rasterizing (in the fragment shader) the bezier curves

So, ideally, browsers would be doing this themselves, after applying the transform to any non-text in the texture, and then compositing with the combined texture?

Could be the speed, content, or something else, but the text at http://fotcorn.github.io/StarRSS/ doesn't seem to shake (as much, anyway) as it fades.

Exhibits exactly the same issue here. Horrible flickering of horizontal lines because those alternate between being a pixel and no pixel wide.

You could make everything oversized, then apply a scale of .25. That will improve the aliasing a bit.

Same for the logo. The scale transform should never exceed 1.0.

This sounds like 3D is turned off in your Chrome. Can you please check your settings chrome://flags. Maybe "GPU compositing on all pages" is turned off -> turn it on.

I have the same issue with no text after the logo. My "GPU compositing on all pages" was set to the default, but after changing it to "enabled" I still see no text. Version 31.0.1626.5 dev-m Aura SyzyASan

After enabing and relaunching chrome the text now works for me. (31.0.1612.0), what does chrome://gpu/ tell you?