Why the input box is showing so different on Ipad but not on chrome
Try to use -webkit-appearance to get rid of the default styles.
Check this issue:
iOS forces rounded corners and glare on inputs
https://stackoverflow.com/a/14758383
iOS on mobile not showing CSS 1px borders correctly
I found the solution. I changed the meta tags to:
<meta name="viewport" content="width=device-width, initial-scale=1">
Related Topics
Why Use * Selector in Combination with *::Before and *::After
How to Place an Image Over Another
What's the Difference Between @Import and @Use SCSS Rules
CSS Grid: How to Apply Color to Grid Gaps
How to Use Text-Overflow: Ellipsis on a Button Element
How to Print Only Parts of a Page
How Did CSS 'Content' Property Work for 'Img' Element in Webkit
CSS Conventions/Code Layout Models
How to Reduce Font Weight in Firefox on MAC with CSS
Force Visible Scrollbar in Firefox on MAC Os X
CSS Width and Max-Width Combined
Sticky Top Div with Absolute Positioning
Bootstrap3 .Visible-* .Hidden-* Display Inline