IX: Interactions on iOS aren't smooth

Hello @Everyone,

I just finished a new Landing Page http://rocketsongs.webflow.io/

As you can see the Call to Actions are moving bubbles. It’s quite nice to use animations to draw attention from the visitors.

Yet, on iOS, the same animation have a bug, they play without smoothing between the steps.

Can you post your share link?

Did you add anti-alias code to the site? The problem might be part of the “flicker” issue seen in Safari so adding the code might help.

Hello @jdesign

Here:
https://preview.webflow.com/preview/rocketsongs?preview=21199fd8d72bf3aa0195830cdf900f23

try adding the bit below to your head code in the dashboard…not sure it will help since this isn’t really a text issue but try it and see. Be sure to wrap it in the style html.

Actually, I think it’s because your transition speed is set at 200ms. Try changing that on those elements and you might not want to use “all” but the specific transition for each element.

html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

3 Likes

Hello @jdesign

Oh I love this piece of code for smoothing / antialiasing fonts! I’m keeping it in my toolbox.

Well, actually the Transition Speed set to only Background-Color did fix this issue. Thank you so much for this great help !

1 Like

No problem. Glad it worked out.

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.