Hi everyone, I’m looking to get some advice on this issue I’ve been having with my site’s responsive layout. The bug only occurs when viewing from an iPhone and typing into the form fields on my product pages. I’ll try to describe the steps to reproduce the behavior:
a) When typing, user input doesn’t show up at all although the cursor is in the field and moving
b) Switching to the next field still shows the previous one empty and repeats the problem when trying to type into it
c) Tapping back on any previously filled out fields 2-3 of times (strangely) reveals the text
d) Rotating viewport landscape to portrait and back seems to also reveal the text in the field
I’ve tried everything that I could find so far and nothing helps get this right:
- setting “-webkit-appearance: none;” on the Product page;
- setting padding to 0 and line-height to various values doesn’t help but may sometimes break step c) described above (i.e. no text shows up in the fields at all);
I’m still very new to front-end, and I wouldn’t be surprised if the issue is somewhere else entirely, but this has been driving me to a point of great frustration and I really need help fixing my form fields on iOS.
I’ve seen that there have been similar issues mentioned on this forum before, but nothing helped so far and some of the topics were closed without a clear resolution.
I appreciate any advice, thanks!
Here is my site Read-Only: LINK
(how to share your site Read-Only link)