Microsoft PR dpt. has done it again. They’ve released a comparison chart, between their brand new IE9, and other browsers such as firefox and chrome.

And for one think it has to stop. Their comparison is full will half-truths and whole lies, and coming from a company that made web-developers suffer and scream in rage, it’s absurd.

IE9 is a better browser then all other IEs. It’s faster, more standard driven and all in all a decent browser. BUT (and it’s a big but) it’s not a modern browser and it’s not by far, better then Firefox or Chrome.

This recent post made me create this :

The truth behind IE9 comparison chart

Yes it may sound whiny to some, but there’s no denial that somebody at Microsoft has failed to check all the fact before posting this.

A little history about browser rendering. The are 3 browser events that happen depending on stuff you change dynamically with JS in DOM.

1. restyle – recalculation of style for affected DOM element.
2. reflow – recalculation of flow and all the Elements that are affected by your change.
3. repaint /redraw - re-rendering of the element in it’s new position, style, whatever you changed.

These “events” happend each time you change something. I’m going to talk about repaint/redraw today.

When you animate a div for instance, each step in the animation, each frame if you will, fires a repaint function in the browser, that makes sense,  as the browser has to show us the updated position/style/whatever of the element.

You would suspect that a browser only repaints the individual animated element, and maybe its surrounding and dependent elements. And you would be right.

So why does some of your animation on the more heavy sites stugger in firefox and IE and Opera when they work like a charm in webkit browsers? Faster browser? Faster Rendering Engine?

All these are a factor, but there’s a hidden factor that you didn’t know about.

float:left;

“OMG? WTF? float? what’s float has to do with animation ??? Alex stop beating around and explain this to me” you must be saying.

It turns out that whenever you animate a div on a page, even if it’s position:relative, that if one of it’s ancestors has a floating (left or right), firefox/opera/ie8 fire a repaint function on ALL THE ANCESTORS content. Not Only the animated div.

So if for instance you have a tiny div that animates every 2 seconds, for every frame of that animation, firefox/opera/ie8 repaint the entire DOM tree up until the floated ancestor.

I don’t know wheather it’s a bug, or this is just how it’s suppose to be. But facts are facts.

I’ve created a small jsfiddle in order to test this.

http://fiddle.jshell.net/JeGKR/10/show/light/

The css3 stuff is there only to make the content heavy so you really notice the animation changes.

Run the animation with task manger open. Then click “add float:left” and see the difference. If you have a fast computer, click on “add content” a couple of times.

Workarounds :

There’s one workaround I’ve read about and it’s just disabling float:left on the ancestors up until the body Element. This won’t be applicable in many many cases I’m afraid.

I’ve yet to find another solution beside putting all the animated elements in a non floated container and positioning them accordingly.

Notes : if you want to see the redraw regions in firefox by yourself, you can download and install  firebug paint events

Credits : This post is a partial translation/adoption from Sergey Chikuyonok – all credits on this find go to him.

Ok so i’m working on this site at work, and our creative designers decided it should have a news ticker in Javascipt. A fade-in/out kind of thing.

I used Mootools (of course) to write a simple script for this. And then I noticed something very strange. While in transition, both in Firefox and IE (6 and 7) the text got Garbled and rendered strangely.

Problem :

I then noticed this deal on another websites :

getstisfaction.com

Preview :

I tried to recreate this , and I made it happen only in IE for some reason.

FIX :

All that needs to be done, is to add background color to the absolute positioned elements that get faded in and out…

like so :

.fade_div{
position:absolute;
background-color:#fff;
}