Advanced CSS Animator Support Product Page

Aliased text in IE after css animation

Asked 24 Feb 2011 08:13:59
has this question
24 Feb 2011 08:13:59 AK Tom posted:
This is a fantastic extension in every browser I have tried, except IE. After running a css transformation on text in IE8, it ends up looking very jaggy. This does not seem to happen on an image. Is there a work around for this?


Replied 24 Feb 2011 10:02:01
24 Feb 2011 10:02:01 Teodor Kuduschiev replied:
Hello Thomas,

This is happening because of the way IE rendering works. Unfortunately there is no workaround, as IE does not support all the features, that all of the modern browsers do.
This should be fixed in IE9.
Replied 24 Feb 2011 19:10:33
24 Feb 2011 19:10:33 AK Tom replied:
I understand it is a bug in IE, however, it is a known but, with a number of work arounds, if you google it.

When I was writing jquery animations by hand, you could fix it by removing the filter in IE when the animation is done
Because IE doesnt support true opacity, and you a have to use
filter:alpha(opacity=50. To prevent this bug, you must remove the filter (ie set it to a blank value) to remove this aliasing effect.

You can see lots of discussions and fixes in posts like this

However, I wasnt able to find in your jquery code where to apply the fix, and was hoping you could help.
Replied 25 Feb 2011 10:16:39
25 Feb 2011 10:16:39 Miroslav Zografski replied:
Hello Thomas,

That fix may be applicable in some occasions but in others may result in a glitch.
In general - some transforms require that value in order to perform certain calculations and you cannot remove it lightly.

Replied 25 Feb 2011 10:25:42
25 Feb 2011 10:25:42 AK Tom replied:
That makes sense, however, it means that I cannot use opacity or rotation transforms on text, because a large percentage of my client base use ie8 (unfortunately).
Would you be willing to give me a hint, where I could insert a function that removes the filter, in your code, after the transformation is done (either in the js file, or the jquery function in the head of the doc)?
It would really help me out of a jam, and I certainly wouldnt hold you responsible for any glitches I caused by editing the code.
Replied 25 Feb 2011 10:42:46
25 Feb 2011 10:42:46 Miroslav Zografski replied:
Hello Tomas,

On prima vista I can tell you to set up the fix as a function and add a function call when animation ends. That can be done in the UI of the extension:
1)open the UI,
2)click on the Advanced button in Animationpart.
3)a new UI window opens.
4)in Callback functions section enter the NAME of the fix function ONLY in the field named onComplete.
5)"OK" yourself out of the UIs.

Try out this way.
I'll see for more convenient ( because with this one you cannot pass parameters to the function )

Replied 27 Feb 2011 10:40:07
27 Feb 2011 10:40:07 AK Tom replied:
I finally got a chance to try this, an it works perfectly!
That is exactly what I needed.
Thanks for the tip.
Very cool extension.

Replied 28 Feb 2011 10:29:16
28 Feb 2011 10:29:16 Miroslav Zografski replied:
Hello Thomas,

Thanks for the kind words.Glad to help.


Reply to this topic