IE8 CSS Absolute Positioning Random Bug

views:

1226

answers:

+1 Q:

IE8 CSS Absolute Positioning Random Bug

I'm encountering a frustrating but seemingly random rendering bug in IE8. I have some absolutely positioned elements on the page (positioned in relation to the page body), the displaying of which are toggled by jQuery.

8 times out of 10 the elements are rendered correctly, but sometimes the positioning is not obeyed and they are simply placed in the top left corner of the browser window (effectively absolute positioned at top 0, left 0).

If I look at the element properties in the IE Developer Toolbar, I can see that the correct css properties are set - they are just not being applied. If I resize the browser window, then the element will jump to its correct position - so it does look like a genuine rendering bug.

I'm setting a correct DOCTYPE on the page, so the brower isn't in quirks mode.

Any ideas how I can combat this or has anyone else experienced similar?

+2 A:

If I recall correctly, the problem occurs when trying to set the position of something before it is displayed.

e.g.

hide object
set position
show object

The object will appear in the top left, until the position is set again or the window is resized forcing IE to re-calculate positions

Jonathan Fingland 2009-10-13 10:59:26

Yes, that does sound logical - how would I go about ensuring the jquery function that adds the elements initially completes before an element is toggled? (jquery / javascript definitely not my strength).

BrynJ 2009-10-13 11:05:55

I see you've added a more detailed explanation, thanks. To explain further what I'm working with - I have a tabbed form (using jQuery tabs) and also a replacement select element plugin called AddIncSearch. The AddIncSearch is called when the tabs are switched, and this calling adds the absolutely positioned elements. Now, in theory, as the event handling is done by AddIncSearch, it should only work after the select elements are correct initialised - but this seems not to be the case.

BrynJ 2009-10-13 11:11:08

one question: do you absolutely position the elements, or does your AddIncSearch widget do the positioning?

Jonathan Fingland 2009-10-13 11:41:45

The AddIncSearch plugin does the positioning (I can add a code snippet to my question, if you think it will help).

BrynJ 2009-10-13 12:02:55

no, but try positioning the AddInc element just after showing the tab

Jonathan Fingland 2009-10-13 12:39:30

Effectively, that is what I'm already doing - AddIncSearch is called on the "tabsshow" event. Is there anything else I can try?

BrynJ 2009-10-13 12:55:19

the tabsshow event may be firing just *before* the tabs are shown. Try putting your position changing code into a setTimeout(func, 0) to take it out of the flow

Jonathan Fingland 2009-10-13 13:42:26

Wow, that seems to work, thank you. I'll do some more testing and if all looks good I'll accept your answer.

BrynJ 2009-10-13 14:09:38

Hmm, some more testing has revealed that this doesn't seem to work all the time - it's subjective, however I'd say the effect is diminished with this code. Any other ideas?

BrynJ 2009-10-13 15:53:46

+1 A:

Have you tried the IE8 specific properties:

-ms-background-position-x: 1px; -ms-background-position-y: 29px;

They only work in IE8 and address this exact issue.

staypuftman 2009-12-30 20:19:36

I too have experienced this, I am using some jquery to show an absolutely positioned element that is only visible when another element is clicked. How odd that Microsoft continue to get the basics completely wrong.

Globalz 2010-01-28 03:23:53

ansaurus

tags:

views:

answers:

IE8 CSS Absolute Positioning Random Bug

related questions