Text Animation is leaving text colored residue behind on Mobile.

[gtrman97]

It works fine on desktop, and even in the responsive design dev tools with a mobile phone selected. But when I open up the same link on my iPhone the text animation will leave little text colored dots on the screen and not clear them away. You can see what I mean by opening up this link with a smart phone: https://bug-tracker-2.netlify.app/sign-in

[maxeth]

Hi, sorry for responding so late.

I can indeed also see those dots on an iPhone device, but it's honestly the first time seeing this. Also: I noticed that when you zoom in, they disappear.

If I visit the examples from the docs or other demos on an iPhone, there are no white dots, so this won't be a general/universal issue.

If you're still using/trying to use it:

• Are you applying any custom styles?
• Did you set a custom wrapper element?
• How does/do the parent element(s) of the TypeAnimation component look like?

[maxeth]

Couldn't reproduce this, closing for now.

[bwong365]

Hey @maxeth, idk if you want me to open a new issue, but I ran into this problem just now as well. It's visible whenever the TypeAnimation is inside a container with flex, flex-direction: column, and align-items: center. My workaround for now is to set a div directly around the TypeAnimation at 100% width and text-align: center. The issue was somewhat visible with font-family: serif, and very evident when using 'Source Serif Pro' (we're loading via a .woff2, unsure if the web font will have the same effect). font-style: italic also makes it more evident.

Edit: https://codesandbox.io/p/sandbox/adoring-sid-hgf328

[maxeth]

@bwong365

Interesting... thanks for sharing.

There's one single code snippet responsible for manipulating the DOM directly in the animation: requestAnimationFrame(() => (node.textContent = snippet)) so this must be some bug with the browsers.

Not sure what options we have to fix this. I'd expect requestAnimationFrame preventing these sort of visual bugs, but apparently it doesn't.

I can try removing requestAnimationFrame or adding some css like transform: translate3d(0, 0, 0); to force hardware acceleration, or will-change: auto; or unset to encourage cpu rendering by the browser and see what it does.