Text shifts during parent animation [Chrome]

[Fakebook]

I'm having an issue with text shifting/resizing in Google Chrome. This seems to happen while the parent div is being animated.

 

If you look at the Codepen example, you'll see the text snap to different sizes, and it also looks like it tries to change weights as well. The other thing I've noticed is that the parent container also shifts with the text.

 

I've read other answers about this, but anything I've tried doesn't work. Does anyone have insight on this issue?

See the Pen PRjLYJ by NerdOrDie (@NerdOrDie) on CodePen

[Carl]

Thanks for the demo. I spent some time looking at it and experimenting.

You can see the jiggle even when you remove the stagger on the interior text spans.

 

See the Pen dmREgY?editors=0010 by GreenSock (@GreenSock) on CodePen

 

This seems to be a browser rendering issue and not something caused in any way by GSAP. Not sure what a possible fix would be but perhaps others around here have some suggestions.

 

[Jonathan]

Hello @Fakebook and welcome to the GreenSock Forum!

 

@Carl is right that this is a browser rendering issue. Nice catch @Carl you brought to my attention the problem being the parent .textArea, and not the <span> staggered children

 

This seems to be an old webkit anti-aliasing text bug when rendering font text using 3d transforms.

 

I see the font shifting in Chrome, but only slightly in Firefox, but each have a different hack to get around this browser bug.

 

For Chrome (the font weight and family might shift or collapse on it self due to webkit 3d transform text bug):

• You can set force3D: false on your from() tween.
   

  force3D: false

  
  Please see CSSPlugin Docs: https://greensock.com/docs/Plugins/CSSPlugin#force3D

   

For Firefox (the font is shifting slightly, this is not really a bug but firefox requires other CSS properties to make it render correctly):

• You have to set CSS perspective on its parent .textarea
   

  .textArea {
    position: absolute;
    left: 300px;
    top: 100px;
    transform-origin: left center;
    background: brown;
    line-height: 100px;
    padding: 0 40px;
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    color: #FFF;
    font-size: 50px;
    
    -webkit-perspective: 1000px; /* add perspective to fix firefox text bug */
    perspective: 1000px; /* add perspective to fix firefox text bug */
  }

   

Chrome uses webkit which has been plagued by this rendering anti-aliasing text bug for many years. To get around this poopy pants webkit text bug you have to tell the browser to render it using 2D transforms which is what force3D: false does.

 

Firefox just needs some supporting CSS properties for 3D transforms so it can render properly, that's why its not a bug in Firefox just a case of missing CSS properties so it can know how to render correctly.

 

You should see in your forked codepen, that we tell the browser to use force3D: false (which will make Chrome use 2D transforms to get around this browser text bug) and CSS perspective in your CSS for the parent .textArea for Firefox.  I also changed top to x (translateX) so it animates more smooth, since top can trigger layout for bad performance.

 

See the Pen rdwXRp by jonathan (@jonathan) on CodePen

 

Does that help?

 

Happy Tweening!

[Carl]

Great detective work, Jonathan. 

Thanks for all the juicy details!

[PointC]

The Oracle of CSS is dropping knowledge.