Mobile Safari Text Input Width Bug

How to fix weird text input field bug on Mobile Safari?

So, basically, Mobile Safari and Desktop Safari have different default stylesheets. While you're doing a good job with widths, etc, the one thing you're missing is explicitly setting padding on the input. Guessing this is the culprit (desktop Safari inherently makes input padding 1px, probably a few px bigger in mobile). I see you're using -webkit-appearance: none (nice), so, as long as you explicitly declare padding, you should be good.

Absolutely positioned input width on mobile safari

Just add padding:0 to your input field and it should solve the issue. This seems like a known issue in Safari for iOS, as it adds extra padding by default in input fields.

Took some help from here to fix it:

Input field showing different size in iOS

Could not find relevant place to fix it in your code in GIT. Guess I am new to react :)

Hope this helps. Cheers!

Screenshot below:

Input field iOS Safari bug — Can't type in any text

input { -webkit-user-select:text;}

this will solve the issue.

Input field showing different size in iOS

Be careful, as far as I know Safari browser in iOS adds extra padding in the input fields.

Try using this code inside your css:

padding: 0;

text field not working in safari

Your problem lies in calcstyle.css here:

* { 
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

I'm not entirely sure why user-select: none; would prevent you from typing into an input but removing this block fixes it for me.

---

EDIT

Here is a possible solution:

Select everything but your inputs...

*:not(input.field) {    
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

---

Related Topics