Streaming live at 10am (PST)

IX: Interactions on iOS aren't smooth


#1

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.


#2

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.


#3

Hello @jdesign

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


#4

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);
}


#5

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 !


#6

No problem. Glad it worked out.


#7

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