Solved

IE moves text by a few px's after scriptaculous fadein

Posted on 2008-10-28
6
750 Views
Last Modified: 2013-11-11
Hi everyone,

Just wondering if anyone has ever noticed a strange IE text blur issue when Scriptaculous fades in an object.

I am using Scriptaculous to fade in my page on load, once the content is faded in, IE seems to blur the text contained within the content. What actually seems to be happening is the text is moving right by 1 pixel once the fade in is complete.

Any help on this issue would be greatly appreciated.
0
Comment
Question by:RichardMass
  • 3
  • 3
6 Comments
 
LVL 1

Author Comment

by:RichardMass
ID: 22827969
Just a followup to the above question I posted. It would seem to be a change to cleartype once the animation is finished. The text stays clean and crisp in IE6, just IE7 seems to blur it and as it uses cleartype I am suspecting that is the cause.

I will leave this open for a short time and if anyone knows any ways of fixing this it would be greatly appreciated though I am starting to think it is one of those things we have no control over.
0
 
LVL 16

Expert Comment

by:sh0e
ID: 22828118
I think you might have missed it, but try to place your question in as many Zones (max 3) as you can, so more experts will see it.  JavaScript is a very popular Zone, so you should always place it there if it relates to JavaScript in some way.

Anyhow, give the layer a CSS style "background-color: white".  Or any other color, just make sure you give it a background-color.
<div id="blah" style="background-color: white"></div>
0
 
LVL 16

Expert Comment

by:sh0e
ID: 22828134
And this one, for example, could go under Internet Explorer and CSS.
The best choice would be Zones: Internet Explorer, CSS, and JavaScript, so you get the most attention.  There seem to be few experts hanging about in JavaScript Frameworks.
0
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 1

Author Comment

by:RichardMass
ID: 22836701
Hi Sh0e,

First off, thank you for the suggestion about where to place the thread, I will make the most of that feature from now on.

Unfortunately the background-color:#fff fix didn't seem to achieve anything. I have put up a test version to display the issue. It only happens in IE7 and you will notice the box containing the test text has the style="background-color:#fff" in it.

TEST:  http://www.midcompodyssey.com/test8/

It's not a huge problem but certainly something I would like to fix if it is possible.

Thank you again Sh0e for all your help. I'm experienced with CSS/XHTML and have been dodging javascript for a number of years as much as possible but you have been a great assistance while trying to get up with the times.

Richard.
0
 
LVL 16

Accepted Solution

by:
sh0e earned 500 total points
ID: 22837596
You want to apply the background-color to whatever it is you are fading. In this case it should be the divlayout-fadewrapper.  Oddly enough, I couldn't reproduce the problem on the content, but all the other text on the page went fuzzy.
It does sound like it is definitely a Cleartype problem, as jQuery seems to turn off Cleartype when using effects.
0
 
LVL 1

Author Comment

by:RichardMass
ID: 22847004
Still no luck with that I'm afraid Sh0e,

I did however find this detail below which would seem to explain the issue I believe...

"IE7 filters (which is how the opacity of an element is currently set for IE) utilize DirectX. Fonts are smoothed using ClearType. The problem is DirectX doesnt understand how ClearType works so any time you use a filter on an item, IE has to turn off font smoothing on the item so DirectX can do the filtering. In earlier betas of IE7, the browser would turn the font smoothing back if you there were no more filters on the item (for example, opacity started at .1 and went up to 1 and the filter was taken off as an opacity of 1.0 and no filter are the same thing). However the problem with that was when you did transitions the text would get jagged and then change back when the transition was done."


I guess we just have to put up with it until IE pulls it's thumb out. I'll stop there before I get worked up about Microsoft. lol.

Thank you for your effort Sh0e.

0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now