Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Thomas James Thorstensson

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

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!

Share this post


Link to post
Share on other sites

Hey Snoop,

 

I think a minimal demo would greatly aid us in helping you with this issue. Could you please recreate the error using CodePen? The below post can provide insight into how to do so: 

 

 

  • Like 2

Share this post


Link to post
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

Share this post


Link to post
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?

 

Share this post


Link to post
Share on other sites

I think I somehow managed to reply as another person, sorry!

 

So, I decided not to worry about it so case closed. Thanks everyone!

 

Former IE11 user, S🍺

 

 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Imxwb4D.jpg

  • Like 1
  • Haha 4

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

  • Haha 3

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×