Support Tests affect layout for positioned elements in IE6-9

[anonymous]

jQuery 1.7 and 1.7.1 breaks all Internet Explorers. Looks like a problem with absolute elements. All absolute divs are lowered after document-ready. No problem with 1.6.4 or earlier. No problem with FF, Chrome and Opera (only IE).

[boushley]

So I've gotten this jsFiddle put together: ​http://jsfiddle.net/boushley/wryLs/2/ and I can't reproduce the error. This seems to render fine in Chrome for me, and IE. Without more information I think we should close this.

[anonymous]

Wait, I'll try to give you more information. I'll try to reproduce it in jsFiddle.

[anonymous]

I worked today on this issue and here's what I found:

-This issue relates to 'position: relative' elements (not absolute elements nested in relative elements, as I thought at first glance). -Look at this on IE6 (green box is shifted down by 25 pixels, it should be placed at the top of blue box):

​http://jsfiddle.net/wryLs/56/

-XHMTL 1.0 Transitional is used in jsFiddle example like on my website.

Any thoughts?

[Timmy Willison]

I'm not sure, but we should look into it.

​http://jsfiddle.net/timmywil/wryLs/59/ ​http://jsfiddle.net/timmywil/wryLs/60/

[Youri]

This does not happen on all IE versions. IE 9.0.8112 (and assuming all other IE9 versions) shows the green box perfectly in the left top corner on all of the provided fiddles.

Is it possible to provide a link to the example you use on your site?

EDIT: I've now also tested this in IE versions 6-8 and never have I seen the green box out of place. Am I missing something or is there no bug?

[anonymous]

Youri, are you using original preinstalled IE6?

Here's what I and timmywil get:

​http://imageshack.us/f/836/26724504.jpg/

(screenshot from ​http://jsfiddle.net/timmywil/wryLs/59/ example).

[Youri]

No, it was run on a VM. Seems like there is a css problem then. Try this fiddle: ​http://jsfiddle.net/wryLs/65/ I think that for some reason it took the spacing in the html as a space and made the next element (green box) go a line down, so without the spacing it might work.

Either way I don't see how it can be related to JS since that's not being used here.

[anonymous]

Thanks for trying to help. I tried your fiddle. Same result (box is shifted down).

Shift happens only because jQuery is included in head tag (zero my code). Removing usage of jQuery fixes the problem. New jQuery (1.7+) repositions relative elements in IE after document.ready event.

Unfortunately I'm not familiar with jQuery code to say what it does for IE browsers in it's internal ready event.

[mikesherov]

This is most definitely caused by moving some of the support tests to after dom ready. The problem went away after I applied the changes from ​https://github.com/jquery/jquery/pull/642 to my codebase, which remove a lot of the "offset" support test stuff.

I'll see if I can fix this without obliterating the support tests, but I'm not sure it'll be necessary if ​https://github.com/jquery/jquery/pull/642 gets merged.

[mikesherov]

​https://github.com/jquery/jquery/pull/643

[Mike Sherov]

fixes #11048: make sure support tests don't modify the layout of the body

Changeset: 2982abbb13454bd4bdf0299f1183fb0d8c02f02d