 Atli  5,058
Expert 4TB
Hi everybody.
I have a JavaScript function that is meant to fade in a HTML element.
To do this I use the standard "opacity" style, plus the non-standard IE "filter: alpha" monstrosity.
This all works, except when the element contains text. In that case, IE appears to go all... well, IE on me, and starts rendering the text all funky.
I made an example of this here.
If you run this in any browser except IE, the two blocks of text will look identical after the left block has faded in. But, IE will render the left block at a totally different level of quality than the right one.
I've done some Googling on this and as I understand it, the filter monstrosity that IE uses is a DirectX thing, which apparently doesn't play well with the ClearType font rendering software that IE uses to render fonts. And in all it's wisdom, to fix the problem, Microsoft simply disables ClearType on the element that uses the filter.
I'm not sure if the type of monitor you use will affect how badly this problem affects you, but I suspect it might be less visible on the old "tube" monitors.
So... my question to you good people is; do you know any way around this problem?
My only idea so far is to simply place a white element on top of the text element and fade that out, but that would be a bit to limiting for any proper use.
O, btw. I have tested this in IE versions 6, 7 and 8 in XP and Vista. All do the same thing.
Thanks for your time.
- Atli Þór
6 5961 
I see what you are talking about. The original, right hand column seems to be of a heavier, almost bolded text than the left hand, faded in normal text.
Can you paste your code here (both html and javascript) so that we can see what you have done thus far? We will see if we can help from there.
Regards,
Jeff
Atli 5,058
Expert 4TB
Sure.
This is the HTML: (well, XHTML, but it doesn't really matter) -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<title>Fade test</title>
-
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
-
<script type="text/javascript">
-
// Pasted this separately below.
-
</script>
-
<style type="text/css">
-
#container { width: 600px; }
-
#fademe { width: 300px; float: left; filter: alpha(opacity=0); opacity:.0; }
-
#static { width: 300px; float: right; }
-
</style>
-
</head>
-
<body>
-
<button onclick="javascript: doFade(document.getElementById('fademe'));">Fade in</button>
-
<div id="container">
-
<p id="fademe">
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam semper. Ut a neque. Praesent faucibus consequat nisi. Suspendisse porta lacus. Nullam blandit faucibus libero. In hac habitasse platea dictumst. Quisque urna sapien, posuere vel, sagittis et, sollicitudin sit amet, libero. Donec vitae purus quis nunc lobortis cursus. Nam eget est quis mi vestibulum egestas. Nam nec sem. Etiam sodales sagittis eros. Integer mollis odio nec nisl. Suspendisse potenti. Sed laoreet dapibus sem. Morbi non mi. Etiam luctus accumsan neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi nisi ipsum, sagittis dapibus, rutrum venenatis, euismod in, risus.
-
</p>
-
<p id="static">
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam semper. Ut a neque. Praesent faucibus consequat nisi. Suspendisse porta lacus. Nullam blandit faucibus libero. In hac habitasse platea dictumst. Quisque urna sapien, posuere vel, sagittis et, sollicitudin sit amet, libero. Donec vitae purus quis nunc lobortis cursus. Nam eget est quis mi vestibulum egestas. Nam nec sem. Etiam sodales sagittis eros. Integer mollis odio nec nisl. Suspendisse potenti. Sed laoreet dapibus sem. Morbi non mi. Etiam luctus accumsan neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi nisi ipsum, sagittis dapibus, rutrum venenatis, euismod in, risus.
-
</p>
-
</div>
-
</body>
-
</html>
-
And the Javascript -
function doFade(pElement, pCurrent)
-
{
-
if(pCurrent >= 1) {
-
return;
-
}
-
else {
-
if(typeof pCurrent != "number") {
-
pCurrent = 0;
-
}
-
else {
-
pCurrent += 0.05;
-
}
-
pElement.style.opacity = pCurrent;
-
pElement.style.filter = "alpha(opacity:" + Math.ceil(pCurrent * 100) + ")";
-
window.setTimeout(function() {
-
doFade(pElement, pCurrent);
-
}, 25);
-
}
-
}
-
One thing I noticed as well when testing in IE8 (Beta 2). All the other IE versions and the standard compliant browsers correctly load the left paragraph totally transparent. IE8, however, loads it totally opaque.
Thanks.
Dunno. Big issue for sure. Does workaround#2 near the bottom of that page offer a glimmer of hope?
Atli 5,058
Expert 4TB
Thanks David, that was very helpful.
The second workaround he shows is what I was originally going to try, but I found it a bit limiting. It would only work on text that has a solid background. I might try it out a bit tho.
But, the first workaround was interesting. I don't mind the text being all fuzzy during the transition as long as it is rendered correctly afterwards. (People that use IE probably won't notice nor care, and if they do, maybe they shouldn't be using IE in the first place :P)
Simply removing the filter attribute after the fade does exactly that.
I changed my example page, so you can check it out.
And this is my updated javascript : -
function doFade(pElement, pCurrent)
-
{
-
if(pCurrent >= 1) {
-
if(pElement.filters) {
-
pElement.style.removeAttribute('filter');
-
}
-
return;
-
}
-
else {
-
if(typeof pCurrent != 'number') { pCurrent = 0; }
-
else { pCurrent += 0.05; }
-
-
if(pElement.filters) {
-
pElement.style.filter = 'alpha(opacity:' + Math.ceil(pCurrent * 100) + ')';
-
}
-
else {
-
pElement.style.opacity = pCurrent;
-
}
-
-
window.setTimeout(function() {
-
doFade(pElement, pCurrent);
-
}, 25);
-
}
-
}
-
I also changed the CSS. The Initial filter settings on the fade paragraph was causing it to revert back to being invisible after the filter was removed by the doFade function. -
<style type="text/css">
-
#container { width: 600px; }
-
#fademe { width: 300px; float: left; }
-
#static { width: 300px; float: right; }
-
</style>
-
It's far from perfect but, well, that's what people get for using a broken browser :)
Anyways. Thanks for the help guys!
I changed my example page, so you can check it out.
It is definitely doing much better in IE/7.0 now (no IE/8 on this end at the moment).
Atli 5,058
Expert 4TB
I've tried it in IE8 (beta 2) and it seems to be identical to IE7.
I also applied this solution to a larger project I have been developing locally and it seems to work fine here to. Although, having multiple elements fading at the same time slows IE down considerably.
I'm currently working with 5 elements fading at the same time and IE is all jittery and slow while Firefox and Chrome play it smoothly.
And the worst thing is that when IE goes jittery the entire OS does to.
Sign in to post your reply or Sign up for a free account.
Similar topics
by: petrovitch |
last post by:
How can I place text on a page like a watermark background. For
example, I may want to put FOR SALE in large red letters in the center
of a page at a 10% opacity then write text over it from the...
|
by: Marek Mänd |
last post by:
This posting will express my concern about the future of css3
forthcoming recommendation.
I think for long time now, that the current implementation of CSS
attribute opacity is less than usable...
|
by: anne001 |
last post by:
Hi
For a class, students are going to run an experiment on line. Each time
a subject runs, his/her data is appended to one giant text file. Their
own data set will be just one line starting with...
|
by: Eric Lindsay |
last post by:
Can someone point me to a good explanation of how to use opacity?
From CSS 3 http://www.w3.org/TR/2003/CR-css3-color-20030514/#opacity
which I read to mean just set a decimal value between 0 and 1...
|
by: superc0red |
last post by:
i have a file:
date: 02-02-2006
name: geopar
doc: test machine
username: test1
password: p4ss
address: test2
phone: 343534543535
username: test
|
by: Darko |
last post by:
Hi,
I'm trying to get and set an element's opacity, but I'm stuck with,
what a hell of surprise, Internet Explorer. As for getting the
element's opacity, I have the following (not working) lines...
|
by: Unicron |
last post by:
Hi everyone. The title says it all.
I have a collection of PNGs with drop shadows. They work great in IE7 and FF.
If I add filters in my stylesheets, such as
icon {
filter:...
|
by: Sunny |
last post by:
Hi, I can change the lement opacity in IE using.
abc.style.filter = 'alpha(opacity=' + 10 + ')';
But this dont work in firefox, In firefox it throws error.
How I can change the opacity of an...
|
by: Marie Gardner |
last post by:
Hi,
I want to create a form that filters a report that is between a date range, and includes only the data for the item selected in the combo box.
For example, I am creating a time manager...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new...
| |
