Things n' Stuff Thoughts about the universe in general

Sometimes, when you try to develop things that work in Internet Explorer, you get to a point where you can just scratch your head and wonder “what the he*$ where they thinking of?!?”. This is one of those cases:

This is in Internet Explorer 8 when set to IE7 mode, but this is very faithful to the original as I’ve tested it on a real IE7 and it behaves the same. What happens here is that when you scroll the page down, all absolutely positioned elements (the two “combo boxes” which are a custom UI widget and the text “Dimensions:… at the top right corner”) get pulled down a few pixels. When you scroll up, they get put back in the correct place.

I would (maybe) understand if that would have happened only for the custom UI widgets (as there is a lot of Javascript code in place to support these, and I would understand if it behaves funny on broken browsers), but it affects the absolutely positioned text exactly the same, and there is nothing funky with that – its simply a block of text that is absolutely positioned.

On a slightly different subject, here is a useful tip for doing using Javascript to manipulate elements in IE7: if you have some Javascript that acts immediately after the page loads and put more content on the page and moves some elements around, if any of these elements are absolutely positioned then IE7 will ignore any changes to their layout, such as setting margins (especially negative margins) and such. This happens if you both change the element’s layout implictly (by adding content, for example) and explicitly (by setting style attributes) in the same Javascript call – the style attributes are ignored.

What you should do is to change the content in one Javascript call, then let the layout settle by exiting back to the rendering engine and then coming back to Javascript to change the layout. I do it like this¹:


$('block').innerHTML = 'Some text that should be updated';
window.setTimeout(function() {
$('block').style.marginTop = '-20px';
},0);


The window.setTimeout() with a zero miliseconds timeout will cause the code to stop executing without doing the style manipulation, the Javascript machine hands the execution back to the browser which then lets the rendering engine repaint the screen with the updated content – the problem with IE7 is that the rendering engine fails to take into account style changes that were made after content changes were done in the same Javascript execution, so we don’t do that. As soon as the rendering engine is done – less then one milisecond later – the timeout kicks in and adjusts the style, and finally handing the execution back to the rendering engine to adjust that as well.

1. example code contains Prototype.JS shortcuts, but the gist of it will probably be understood easily [↩]

This entry was posted on Wednesday, October 6th, 2010 at 13:02 and is filed under Funny, Programming. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.