...

View Full Version : JS animation and text rendering in IE 7



chump2877
02-09-2007, 04:11 AM
Lately, I'm noticing a not so pleasant side effect of IE 7's new "ClearType" feature...the ClearType feature can be found under 'Internet Options', under 'Advanced', as a checkbox labeled 'Always use ClearType for HTML'.

if you have 'Always use ClearType for HTML' checked (I think it's on by default?), JS animation effects that manipulate sizable amounts of HTML text using the setTimeout() function are choppy....If you uncheck this option, the animation works fine (smoothly)...

It obviously has something to do with the browser laboring over redrawing the text during the animation....

I see this as a problem if you assume more and more people will be using IE 7, and most are likely to have this option turned on....

Does anyone know of a way to eliminate this problem without disabling the ClearType feature?

Thanks.

chump2877
02-09-2007, 06:02 PM
I actually ran into this problem the other day when helping somebody on here...Try running the following code in IE 7....then try running it in FF...and here is the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="ltr">

<head>

<title>Nav Menu</title>

<style type="text/css">
<!--

body
{
margin:0;
}

#top
{
background-color:#333;
font:bold 26px Arial,Helvetica;
text-align:center;
color:#fff;
position:absolute;
top:5px;
left:50%;
width:800px;
height:150px;
margin-left:-400px;
}

#top p
{
margin:110px 0 0 0;
}

#top a, .submenu a
{
color:#fff;
}

#bottom
{
background-color:#eee;
font:16px/22px Arial,Helvetica;
position:absolute;
left:50%;
width:800px;
margin-left:-400px;
z-index:900;
}

#bottom p
{
margin:25px 20px;
}

.submenu
{
background-color:#aaa;
font:22px Arial,Helvetica;
text-align:center;
color:#fff;
position:absolute;
top:155px;
left:50%;
width:800px;
height:65px;
margin-left:-400px;
}

.submenu p
{
margin:15px 0 0 0;
}

-->
</style>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

</head>

<body>

<div id="top">
<p><a href="#">Home</a> | <a href="#" onclick="submenu('Activities');">Activities</a> | <a href="#">Cost</a> | <a href="#" onclick="submenu('Local');">Local</a> | <a href="#">Contact</a></p>
</div>

<div id="submenu_container">
<div id="Activities" class="submenu" style="z-index:500">
<p><a href="#">Quads</a> | <a href="#">Horse Trekking</a> | <a href="#">Off Road Driving</a> | <a href="#">Paintball</a></p>
</div>
<div id="Local" class="submenu" style="z-index:500">
<p><a href="#">Pubs</a> | <a href="#">Hotels</a> | <a href="#">Restaurants</a></p>
</div>
</div>

<div id="bottom" style="top:155px">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis suscipit ultricies tortor. Morbi auctor, sapien ut posuere porta, magna nisl tempus leo, ut dictum ipsum sem non odio. Pellentesque pharetra, velit quis molestie lacinia, quam sem interdum urna, vel aliquet dolor tellus eget massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in nibh. Donec non purus. Etiam ut sem sed quam dapibus porta. Nam consequat congue dolor. Morbi id felis. Aliquam nibh. Etiam sollicitudin, augue accumsan cursus adipiscing, est justo imperdiet neque, in gravida wisi neque at ante. Nulla at tortor. Donec elementum tristique pede. Mauris in erat. Nullam posuere sem et felis. Aliquam consequat bibendum ante. Sed vel magna in urna aliquet aliquet. Sed feugiat, lectus nec fringilla dignissim, elit diam tristique arcu, eu consequat erat augue eu nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis suscipit ultricies tortor. Morbi auctor, sapien ut posuere porta, magna nisl tempus leo, ut dictum ipsum sem non odio. Pellentesque pharetra, velit quis molestie lacinia, quam sem interdum urna, vel aliquet dolor tellus eget massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in nibh. Donec non purus. Etiam ut sem sed quam dapibus porta. Nam consequat congue dolor. Morbi id felis. Aliquam nibh. Etiam sollicitudin, augue accumsan cursus adipiscing, est justo imperdiet neque, in gravida wisi neque at ante. Nulla at tortor. Donec elementum tristique pede. Mauris in erat. Nullam posuere sem et felis. Aliquam consequat bibendum ante. Sed vel magna in urna aliquet aliquet. Sed feugiat, lectus nec fringilla dignissim, elit diam tristique arcu, eu consequat erat augue eu nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis suscipit ultricies tortor. Morbi auctor, sapien ut posuere porta, magna nisl tempus leo, ut dictum ipsum sem non odio. Pellentesque pharetra, velit quis molestie lacinia, quam sem interdum urna, vel aliquet dolor tellus eget massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in nibh. Donec non purus. Etiam ut sem sed quam dapibus porta. Nam consequat congue dolor. Morbi id felis. Aliquam nibh. Etiam sollicitudin, augue accumsan cursus adipiscing, est justo imperdiet neque, in gravida wisi neque at ante. Nulla at tortor. Donec elementum tristique pede. Mauris in erat. Nullam posuere sem et felis. Aliquam consequat bibendum ante. Sed vel magna in urna aliquet aliquet. Sed feugiat, lectus nec fringilla dignissim, elit diam tristique arcu, eu consequat erat augue eu nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis suscipit ultricies tortor. Morbi auctor, sapien ut posuere porta, magna nisl tempus leo, ut dictum ipsum sem non odio. Pellentesque pharetra, velit quis molestie lacinia, quam sem interdum urna, vel aliquet dolor tellus eget massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in nibh. Donec non purus. Etiam ut sem sed quam dapibus porta. Nam consequat congue dolor. Morbi id felis. Aliquam nibh. Etiam sollicitudin, augue accumsan cursus adipiscing, est justo imperdiet neque, in gravida wisi neque at ante. Nulla at tortor. Donec elementum tristique pede. Mauris in erat. Nullam posuere sem et felis. Aliquam consequat bibendum ante. Sed vel magna in urna aliquet aliquet. Sed feugiat, lectus nec fringilla dignissim, elit diam tristique arcu, eu consequat erat augue eu nibh.</p>
</div>

<script type="text/javascript">
<!--

var mainObj = document.getElementById('bottom');
var lastSubID = "";
var currentSubID;

function submenu(id)
{
var navObj = document.getElementById(id);
currentSubID = id;

if (lastSubID == "")
{
resetZIndex();
navObj.style.zIndex = parseInt(navObj.style.zIndex) + 5;
moveNavDown(id,null);
}
else if (lastSubID == id)
{
resetZIndex();
navObj.style.zIndex = parseInt(navObj.style.zIndex) + 5;
moveNavUp(id,null);
}
else if (lastSubID != id)
{
moveNavUp(lastSubID,1);
}
}

function moveNavDown(id,changeNav)
{
if (changeNav == 1)
{
resetZIndex();
var navObj = document.getElementById(id);
navObj.style.zIndex = parseInt(navObj.style.zIndex) + 5;
}

if (parseInt(mainObj.style.top) < 220 - 5)
{
mainObj.style.top = parseInt(mainObj.style.top) + 10 + "px";
setTimeout('moveNavDown("'+id+'",'+changeNav+')',50);
}
else
{
lastSubID = id;
}
}

function moveNavUp(id,changeNav)
{
if (parseInt(mainObj.style.top) > 155 + 5)
{
mainObj.style.top = parseInt(mainObj.style.top) - 10 + "px";
setTimeout('moveNavUp("'+id+'",'+changeNav+')',50);
}
else
{
lastSubID = "";
if (changeNav == 1)
moveNavDown(currentSubID,changeNav);
}
}

function resetZIndex()
{
var subArr = document.getElementById('submenu_container').getElementsByTagName('div');

for (i=0; i<subArr.length; i++)
{
subArr[i].style.zIndex = '500';
}
}

-->
</script>

</body>

</html>

david_kw
02-09-2007, 06:31 PM
I really don't see much difference between the browsers (tried IE6&7, FF1.5,&2, Opera 9). And if you change the setTimout time from 50 to 1 it runs smoother which means the browser isn't running at full speed. If you are having a problem maybe it is machine specific for that one feature.

david_kw

chump2877
02-09-2007, 07:05 PM
i can't figure it out....normally, my experience has been that IE renders animation the smoothest of all the browsers....but this ClearType option really slows it down on my machine....Disable ClearType, and it works like a charm...

Also, taking the timer down to 1 instead of 50 doesn't seem to help...

I have 1GB of RAM and a fast enough CPU...maybe it's my video card?....Does IE 7 have greater system requirements than other browsers?....seems possible (i.e., Vista sounds like a real resource hog)....but I seem to meet and exceed the minimum system requirements (http://www.microsoft.com/windows/downloads/ie/sysreq.mspx)....grrr



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum