Wierd shifting with jQuery effects in IE

JavaScript
1

Hi,

I’m wondering if anyone else has come accross this issue and if there is a solution. Using the fadeIn() jQuery effect on text in Internet Explorer 8 causes the text to shift in position at the end of the fade effect. Try the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>jQuery shift in IE</title>

<style type="text/css">
* {margin:0;padding:0}

html,body{height:100%}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#9b9b9b;
	line-height:130%;
	margin-top:0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #ffffff;
	text-align:justify;
}

#wrapper{
	height:100%;
	width:100%;
	display:table;
	vertical-align:middle;
}

#outer{
	display:table-cell;
	vertical-align:middle;
}

#maincontent {
	height: 570px;
	width: 985px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 8px;
}
</style>

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(document).ready(function(){

  $("#hometextbox").hide().fadeIn(4000);

});
</script>

</head>
<body>
 
<div id="wrapper">
<div id="outer">
<div id="maincontent">

<div id="hometextbox">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at commodo urna. Phasellus venenatis eros nec leo tincidunt luctus. Aliquam augue felis, facilisis sed malesuada quis, imperdiet non libero. Etiam scelerisque sem vitae purus feugiat mollis. Maecenas venenatis feugiat mollis. Aliquam massa diam, gravida vitae tempus nec, hendrerit eget orci. Suspendisse laoreet nulla et mauris ornare ut pulvinar eros bibendum. Aliquam ullamcorper odio malesuada magna suscipit tincidunt. Aliquam ac diam ante. Nam condimentum blandit sapien, pretium luctus est elementum sit amet. Sed tincidunt rhoncus turpis vitae faucibus. Maecenas euismod, enim et mattis pretium, justo dolor ultricies sem, volutpat varius nibh tellus et tortor. Donec in tellus quis felis ultrices aliquet id at leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque ornare euismod enim eget sollicitudin. Phasellus non arcu et purus luctus luctus vel tristique libero. Nam eu enim metus. Quisque nec libero non sapien consectetur egestas eget sit amet erat. Suspendisse in mi auctor felis consequat fermentum in quis ipsum. Aliquam posuere vestibulum pharetra.</div>
</div>
</div>
</div>
</body>
</html>

Removing the divs with their css, sort of stops it from shifting, however for some reason it seems to get bolder at the end of the fade!

Thanks,
cph :slight_smile:

2

I don’t think JQuery is to blame here, my money says it’s just bad work on the part of MS when building their best browser ever. IE8 isn’t doing particularly well with nothing but your text and CSS. Get rid of all the JS and highlight bits of the text, you should see the characters around it jump around a bit. I took a screenshot of the fade partway through, and another at the end and overlaid them in photoshop, the pixel shift is not consistent to all the text, some parts just go down, some parts go down and to the left.
It’s no problem with your code, nor your CSS. It’s just low quality rendering.

3

Thanks for you response Zarin.

Yes that confirms my initial thoughts that it is largely IE’s rendering.

I have noticed though that removing the display:table; from the css stops it shifting, although it still renders badly at the end where it sort of jumps to looking bolder at the end of the transition.

4

I would suspect that there’s not much that can be done there. The jQuery team has done a lot of work keeping things consistent across browsers, so it’s not a JS issue. This looks like it’s just going to be an issue with IE rendering opacity. If you stop the JS and use each of these separately:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

You will see there’s not much difference between them. 50 to 99 is a big change in shade, but 99 to 100 doesn’t seem visible at all. Then you remove the property altogether (Like jQuery does at the end of the fade) and it’s a vast difference.
I suppose you could look at the jquery source for fading, and try to animate it yourself without removing the property so as to avoid the major change, but you’ll still have light text, and is it really worth catering to IE like that?