Weird Issue with border radius and overflow on mobile

Design help Animations & Interactions
1

Hey guys,

I’m working on a client site and ran into some issues with a button hover animation.

Wanted a “loading-effect” on hover. I successfully managed to do so by making a separate ‘button background div’ that moves behind the button through an animation on hover.
The button and background div are inside another div with overflow:hidden.

Works nicely on desktop, but for some reason there’s an issue with the mobile version. (The border radius of the outside div isn’t working) The strange thing is that it works perfectly inside the Webflow preview. But on the published site it doesn’t…

Any help is much appreciated!

Here is my public share link:
https://preview.webflow.com/preview/pan-shave?utm_medium=preview_link&utm_source=dashboard&utm_content=pan-shave&preview=de4394abfe5c10010528a8c620320522&mode=preview

And the published site:

2

Hi @pablo.aer I had a look and you should pay attention on your border radius and overflow hidden. I worked for me.

3

Thanks Stan. That’s what I did… and works perfectly on desktop. For some reason it’s not working as expected on mobile, even though I’m not doing anything different.

4

oh I see what you mean but it’s because you do not have selected other viewports to trigger your animation.

CleanShot 2020-11-23 at 10.07.29