1

UPDATE: Here's a link to a minimum reproducible bug. Instructions for running it are in the readme

I'm having issues with the bottom padding below an input placeholder on mobile safari. Here's what the input placeholder looks like on mobile safari:

enter image description here

Here's what the input placeholder looks like on Chrome:

enter image description here

As you can see there's a significant difference in the space between the placeholder text and the bottom border.

I've tried changing line-height as suggested by a few other stackoverflow answers and I've tried changing padding-bottom on the ::placeholder with appropriate vendor prefixes... I'm not sure what else there is to try.

samcorcos
  • 2,330
  • 4
  • 27
  • 40

2 Answers2

1

I'd recommend not using line-height for inputs and buttons as it has major browser inconsistencies. Instead use height and padding to make elements the size you want, but in this case using margin should be sufficient once you remove the line-height property.

Drewby
  • 363
  • 1
  • 8
0

It's hard to answer without seeing the code. Have you tried to putting a margin-bottom on either the top object or putting a margin-top on the input field. You will have to put it in a condition for safari browser only though, you can do this directly inside the CSS using - reference here: is there a css hack for safari only NOT chrome?

There has to be an underlining problem with this, I experienced something much like this with floats that were 0.1 pixels off between the two browsers which didn't render my grids properly. I fixed it by using fixed values for all the objects: width and height. I noticed the pencil in the top image is further away from the California than on Chrome.

Community
  • 1
  • 1
Tyler Hackbart
  • 1,948
  • 1
  • 10
  • 5