I have an input that is absolutely positioned inside a container. The container is fixed width 200
and the input is fixed with 160
with a margin of 20
on the left. This produces the result you would expect on Chrome:
But on mobile safari... it looks like this:
Here is a minimum reproducible bug. Instructions on how to get it running are in the readme.
This bug does not appear when the inner component is a div
, but appears to be specific to input
.
How does one format an absolutely-positioned text input on mobile safari so that it aligns the same way it does on Chrome, Safari, and Firefox?
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: