Split Text Crop Char

[Dkam]

I've used same html mark-up like Split Text uses.

CSS translate3d crop text in Chrome and iOS chrome.

Chrome crop after: transform: translate3d(0px, 0px, 0px);

But I don't understand why.

 

Thanks!

See the Pen myyjxp by anon (@anon) on CodePen

[Jonathan]

Hello Dkam, and Welcome to the GreenSock Forum!

 

That is a chrome webkit browser bug (webkit), not GSAP. This usually happens on certain elements when 3d transforms are applied

 

I notice you are not animating anything. Your codepen is missing GSAP code in the JS panel of codepen?

 

You are just applying translate3d(0,0,0,) to the web font in your CSS stylesheet... which would not really do anything. unless your trying to force hardware acceleration?

 

So since you are not animating anything that i can see.. just use 2d transform translate(0,0) to remove the crop.

 

If you were animating this with GSAP, you would set force3D:"auto" to your tween and GSAP would animate using 3D transforms, and then when the tween was done animating it would remove the 3d transform from the element. But if your element still needed to be in a transformed state at the end of it animating.. then it would convert your 3d transform into a 2d transform, so the end state would not be affected by the 3d webkit bug, but you would still have a transform. This same thing happens if you are animating iframes with embedded youtube or vimeo video.. the end state of the animation would need to have 3d transforms removed, or converted to 2d transforms for the elements end state.

 

If you look at this example in codepen (i modified your example).

 

Test in Chrome:

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

 

I added a 2d transform so you could see that there is no cropping.

 

So as you can see if you were to animate an element using force3D:"auto" you wouldn't get the crop.

 

Also when you animate using 2d or 3d transforms.. its best to have your element use CSS position absolute or relative to animate.

 

If you like you can modify your codepen example with GSAP code so we can see what you are animating.. since your codepen example above is just using CSS transforms in your stylesheet (or CSS panel in codpen)

 

so try adding force3D:"auto"  to your tween to help with the crop when dealing 3d transform webkit bug

 

force3D, which is part of the GSAP CSSPlugin:

 

when you set force3D:true, it forces GSAP to apply a 3D value to the element's transform, meaning matrix3d() instead of matrix(), or translate3d() instead of translate() which typically results in the browser putting that element onto its own compositor layer, making animation updates more efficient. In other words, setting force3D:true usually boosts performance, making movement more smooth. However, if you exceed the GPU's memory limit, performance will degrade, so it's not wise to force3D:true everything all the time. See http://css-tricks.com/myth-busting-css-animations-vs-javascript/ for more details. In our experience, though, it helps performance more often than not. The default value is false.

 

Resources:

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

 

If you are still having issues, please setup your codepen example with some of your GSAP JS code you are testing. So we better help you by seeing your code in context with your JS, and the CSS HTML markup from your codepen link above.

 

Here is a nice video tut by GreenSock on how to create a codepen demo example.

 

Hope that helps

[Undertone_Daniel]

Old thread but I was having issues with individual characters of custom fonts getting cropped at the left or right edge when using split text.
 
The only thing that I found to work was to loop through the characters and add a few pixels to their width. Since splitting creates individually sized character divs, the divs were not wide enough to accommodate some of the characters.
 
I did something like this:

mySplitText0 = new SplitText(".copy0", {type:"chars", charsClass:"characterClass", position:"absolute"}),

chars0 = mySplitText0.chars,

// pad the character width so there's no cutoff letters 
for (var i=0; i<chars0.length; i++) { 
   var charWidth = $(chars0[i]).width(); 
   $(chars0[i]).css("width", charWidth+5); 
}  

Hopefully this helps someone. It's a bit kludgy but this stumped a couple of people for a few hours until we came up with this hack.

[Carl]

Thanks for the suggestion.

Most of the time the cropping issue is due to splitting the text BEFORE the custom font is loaded and rendered to the screen. This causes SplitText to grab the widths of your fallback or system fonts.

 

this thread here might help, especially the CodePen demos: http://greensock.com/forums/topic/11025-splittext-and-fonts/

 

Next time you hit a snag, please ask here before wasting hours. We love to help.