Jump to content
Search Community

IE11, sliding text down (open sans), wobbly before stop

Thomas James Thorstensson test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi

 

I think I solved this issue a year ago but can't find the css I added. 

 

When I slide some text down using y: property, and the text is Open Sans, but happens with other font too:

then before it comes to halt it wobbles, but only in IE11.

 

I have rotation 0.01 tip on there, and tried defaultForce3d true, but there was something else I did that fixed this, something in CSS.

My css by the the way has backface visilibity hidden but that won't affect IE11.

 

There was something else I did with aliasing, cutting into the font to get it to work,

somehing weird with lots of channels and 0, 0, 0, 0 values but cant remember what it was.

 

If any ideas, feel free to post!

Link to comment
Share on other sites

A lot of the CSS properties like text-rendering and font-kerning don't work in IE11 so I'm not sure what you did. Maybe looking at your old post will jog your memory?

As @ZachSaucier mentioned, a demo would be helpful. Another good reason to make demos for questions is you'll have a reference to come back to when you forget what you did. ;)

 

Just my two cents but IE11 is coming to its end of support. Maybe tell your client not to worry about it?

  • Like 2
Link to comment
Share on other sites

2 minutes ago, PointC said:

Hello! I decided not to worry about it. But I think you just triggered my memory, I did something with the kerning properties!

I thank you all for the kind offer of help. IE11, prepare to get sacked!

 

:) S.

2 minutes ago, PointC said:

 

 

A lot of the CSS properties like text-rendering and font-kerning don't work in IE11 so I'm not sure what you did. Maybe looking at your old post will jog your memory?

 

2 minutes ago, PointC said:

 

As @ZachSaucier mentioned, a demo would be helpful. Another good reason to make demos for questions is you'll have a reference to come back to when you forget what you did. ;)

 

Just my two cents but IE11 is coming to its end of support. Maybe tell your client not to worry about it?

 

Link to comment
Share on other sites

@Snoop  .. I don't mind taking a crack at it in IE11.

 

I was late to the party and you might as well have it work in IE11, since it's the highest version of Internet explorer on Windows 7. And as much as I hate and despise IE11, its not a dead horse until January 14, 2020. So lets give that IE11 horse, one last ride into the sunset and see that codepen demo. :blink:

 

But that wobble your seeing right at the end of your text animation, sounds like the rendering layer being removed after its transitioned. You could be missing some CSS transform properties that IE11 requires to render CSS transforms correctly after transitioning, especially for web font text. Its an old horse so some times you need some hay. ?

 

You could make a limited codepen demo example so we can test it in IE11 to see if its a bug in IE11 or missing CSS properties to  stop anti-aliasing mumbo jumbo.

 

 

Happy Tweening!

  • Like 4
Link to comment
Share on other sites

  • 2 weeks later...

Jonathan

 

Thanks for your reply. I managed to get it working, it turns out that it was the rotation:0.01, which actually was not working in this case but causing the animation to jitter in the end. So I dropped that and tested in Opera, Chrome, IE and Firefox (ugh).

 

Thanks for all your hard work!

 

 

 

 

On 7/10/2019 at 10:27 PM, Jonathan said:

@Snoop  .. I don't mind taking a crack at it in IE11.

 

I was late to the party and you might as well have it work in IE11, since it's the highest version of Internet explorer on Windows 7. And as much as I hate and despise IE11, its not a dead horse until January 14, 2020. So lets give that IE11 horse, one last ride into the sunset and see that codepen demo. :blink:

 

But that wobble your seeing right at the end of your text animation, sounds like the rendering layer being removed after its transitioned. You could be missing some CSS transform properties that IE11 requires to render CSS transforms correctly after transitioning, especially for web font text. Its an old horse so some times you need some hay. ?

 

You could make a limited codepen demo example so we can test it in IE11 to see if its a bug in IE11 or missing CSS properties to  stop anti-aliasing mumbo jumbo.

 

 

Happy Tweening!

 

 

  • Like 1
Link to comment
Share on other sites

On 7/20/2019 at 3:23 PM, Snoop said:

I managed to get it working, it turns out that it was the rotation:0.01, which actually was not working in this case but causing the animation to jitter in the end. So I dropped that and tested in Opera, Chrome, IE and Firefox (ugh).

 

The reason that worked by removing it, Is because the rotation: 0.01 was adding a new rendering layer. By removing it the browser didn't have to take a snapshot of the font and add its horrible anti-aliasing which is what you saw at the end of the tween transition. Sometimes adding/removing certain CSS properties or adding/removing CSS transform specific properties can resolve that, since the browsers require other properties in order to render font correctly. But glad you got it working.

 

On 7/20/2019 at 8:54 PM, Visual-Q said:

Uh oh, the GSAP Moderators have spit into two opposing IE11 factions, led by Blake and Jonathan respectively. Civil war will soon follow?

 

LOL.. i just like making as many browsers render the same, especially if your selling products or services so you can reach the broadest audience (customers) possible. :)

 

Knowing is half the battle, yo joe  :)

  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...