*****UPDATE*****
I found out why chrome is not handling well the canvas element when a DIV is overlapped on top!
It seems Chrome simply doesnt support well the GPU acceleration. Once I chages chrome’s settings and disabled the feature, everything worked smoothly
But this really sucks because I like lots of sites that are playing with GPU acceleration and WebGL…they simply don’t work anymore!
So I guess in the end I’ll browse with Firefox :P
*****UPDATE*****

What happens when this that worked up until yesterday suddenly don’t work anymore? You try to fix them.
So one week ago I changed site background and I noticed chrome was suffering enormously. The poor thing just couldn’t keep up with the graphics! Details? ok.
so you have basically 3 moving elements: header image, logo, and scrolling background. All done with niceScroll.js. What I did is a little bit of parallax scrolling with this nice plugin.

While at first it seemed to work fine, I must say that as soon as I put some higher resolution images it just stuck the browser. I tried using firefoc and I must say I’m amazed at the performance improvement. FF got through it as if it was nothing. Nothing.

I decided to use the canvas element. I already knew the canvas element …just plain sucks. But it’s good for some things like fast graphics…or so I heard at least! So I decided to try it on the website. But, as you may know, html5 and canvas are NOT compatible with all browsers. To make cool animations we once relied on the flash plugin. But since we onw…sorta can’t, I had to open a can of worms and deal with compatibility issues…like… IE and Opera don’t display most canvas stuff

After some browser-check code, I finally settled to use the canvas element for chrome and Firefox. This way I was able to reproduce all three elements (logo, banned and background) in one canvas and move them accordingly to the page scr4ll. Very nice and smooth. Of course in firefox there is no change at all. It was and it is still smooth. But in chrome the improvement is grandiose. It’s really too bad one must go through all of this for three simple elements….but I guess we owe this to the web 2.0…or whatever…

So that’s it? nonononnono we’re just starting.
Since these images have to load I thought it’d be nice to have them fade in one by one. Done that before with jQuery and CSS. But now we have the canvas element! I searched one day for info on a single image’s alpha property but guess what…it just isn’t there. It seems you have to deal with a “globalAlpha” property. I ask myself “why global? Wait: tell me it’s not really a global property…”. it of course is. So how are you supposed to use it on multiple objects? Check it out: it’s hilarious! you must draw in each frame the three pictures, in a sequence, regulating the globalAlpha in between each one of them! there is no other way. How about that! I didn’t even entertain the idea of going through that so I just had a listener for the load completion of the three elements and did one single jQuery animation on the whole canvas element. I understand I’m not a great programmer and I might have a long way to go before I understand many decisions made..but this is just plain stupid. It’s like going from as2 to as3..just…let’s complicate things for the heck of it. It’s demented.

Fine: at least I got all done. Now it works and everything runs fast and smoothly. I should be happy. Why am I so bitter? this is why:

and

So exactly what’s going on? My fullscreen slideshow is somehow conflicting with the canvas behind the website. And there’s somply nothing I can do to prevent it.

People are turning away from Chrome because recently it’s just not working well. Google should really stick to search engines.

Ladies and gents, that’s it: I’m not doing anything about this. This bug has been generated from an html elements that should be state-of-the-art!
…and is nonetheless working in firefox.

Maybe I’ll write more about the canvas element I used to create the visualizer for my audio player in another post. By the way: that one’s working on chrome but not in firefox…but that’s actually expected.