IE 7’s rendering bug

Recently I was working on some UI stuff and ran into problems with IE 7. The problem is something like this:
There are a couple of steps to be followed to register yourself at the site. The step on which you are currently on is highlighted at the top of the page(They are numbers inside a small circle). Below each number is an arrow which moves along as the user proceeds. The easiest way to do this is to keep a span element below each number and make its css display property block or none from JavaScript as appropriate. The problem in IE was that the screen was not updating when the arrow was supposed to move. When the user moves from step 1 to step 2 the arrow would stay below the number 1. I searched around for a solution. The problem was with IE not repainting the portion of the document when some css was added dynamically added. To get across this problem all we have to do is, force IE to repaint the portion. To do this we just have to manipulate the classname of the element itself or of the parent. This line of code did just that:
element.className = element.className;


element.parentNode.className = element.parentNode.className;

This will force IE to render the document and the UI will get updated.


Tags: , , , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: