Feb 24, 2008

Internet Explorer rendering problems or how to repaint Web-page

A short prelude.

I'm developing a small checklist application, to study ruby/rails and to play with various Web 2.0 UI patterns. And to get a tool which will help me to organize all my todos.

On the checklist screen I have, guess what - list of tasks, the checklist is comprised of. On some actions (like completing a task) the tasks are updated incrementally (with plain Javascript), on some actions (like undo) the list is reloaded as a whole.

Now the story.

To avoid task rendering in two places (on the server-side, when tasks are loaded from the server and on the client-side when they are updated in-place) I've used an approach when all rendering is performed by Javascript, even on the full page reload. This implies generation of the HTML on the browser-side and inserting the resulting HTML into the page in window.onload hook.

The problem was that in IE the inserted HTML was rendered like a total mess. Elements were painted one upon another, lost their position, styles.

As I found out later, the page resize fixes the rendering.

So I had to force a repaint of the inserted elements to fix the rendering.

The solution was simple. All I had to do was to add a fake CSS class to the inserted element and remove it afterwards (in fact, there is no strict need to remove the class). This operation forces an element restyling in IE and fixes its rendering. Looks like a hack, and it is.

By the way, moving task list rendering from the server side to browser gave me performance gain of 200% on the server.