More Internet Explorer Funny Behaviors

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(1):


$('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 []

2 Responses to “More Internet Explorer Funny Behaviors”

  1. Shlomi Fish:

    Thanks for the post! I added it to my “Stop using Internet Explorer” page.

    While I’m in the neighbourhood, a few comments:

    1. In the reply form “Mail” should be “E-mail”, because “mail” means physical mail.

    2. The date reads: “Wednesday, October 6th, 2010” – “October 6th, 2010” is an evil Americanism, which makes no sense and one should use “6 October, 2010” instead.

    3. There is no preview button for the comment box.

    • Oded:

      Thanks for your comment.

      1. I fixed.
      2. Its how all English speaking countries format their “long date” (even in England). I may change it in the future but at the moment I’ll keep it that way.
      3. I don’t like the preview plugins – I think they are slow and annoying. I also hate “AJAX” comments, but that is different problem altogether.

Leave a Reply

 

 


Spam prevention powered by Akismet