Hello, I’m working on my portfolio website and a strange behavior occurred when I finished my contact form.
When I view the contact form on a desktop device:
- It has the right styling (border radius set to be 8px, when focused it has a purple rounded outline (all breakpoints work perfect)).
- The img animation is full width on desktop and all breakpoints (works great).
But when I checked the contact form on Iphone 13 Pro Max:
- It has incorrect styling (it has sharp edges, supposed to be rounded) and font size is smaller (it zooms in after a click).
- The img animation is not full width for some reason.
Do you guys know why something like that occurs? I would like to understand what’s happening and avoid it in the future.
Here is my site Read-Only: Webflow - DannysVibe's Five-Star Site
Hello @DannysVibe, so I tested your site on my iphone 13 and I experienced the same issue at first load, but then after I refreshed a couple of times it showed it as you want it.
As you can see the borders on the input field were rounded and the animation was not cut out. My only guess as to what is going on is maybe the grid holding the animation and the form is trying to resize the lottie animation. Try taking the lottie out of the grid and see if that fixes the issue. I hope this helps.
Thanks for the insights!
I looked at the text field in my other project and it’s always the same result with sharp border radius (0px) on a mobile device even if it’s set to be rounded.
Here is the other project with only text field: Webflow - DannysVibe's Dapper Site
Is there anybody who knows how to avoid it?
That is weird @DannysVibe because I get the rounded corners on my iphone and on safari. In fact on my iphone both text inputs are cornered. Are you sure you don’t have any other css code on your site? I would say try this line of code in your site to test if it changes anything -webkit-border-radius: 8px I hope this helps.
1 Like
