CODEWITHSUNDEEP
htmlioscss
grhu
grhu

Reputation: 470

Chopped placeholders on mobile safari

I have a problem with placeholders on mobile safari. I've tested it on iOS 10 and 11 and so far I couldn't find any solution. Here are the screenshots from iOS Safari and Firefox/Chrome (desktop devtools, but looks the same on Android):

Screenshot from iOS Safari and mobile Firefox/Chrome

Here are the placeholder styles that I'm using right now:

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #555555;
  text-indent: 1rem;
  padding: 1rem;
  margin: 0 !important;
  white-space: normal;
}

And inputs:

.form__input {
  font-family: 'Poppins', sans-serif;
  width: 100%;
  border: none;
  text-indent: 1rem;
  transition: all 0.5s;
  padding: 1rem !important;
  border-radius: 0 !important;
}

Same styles goes for "::-moz-placeholder", ":-ms-input-placeholder" and ":-moz-placeholder". i've also tries with "padding: 0 !important", different text-indent. On inputs I've tried with fixed height with 0 padding, but also no luck.

What is going on here? In the webkit placeholder specs that I've found there is literally nothing that should cause this. Have anyone had similar problem and found any solution?

Upvotes: 1

Views: 1898

Answers (2)

Victor Alvares
Victor Alvares

Reputation: 1

Force font-size:

.form__input { font-size: 13px; }

Upvotes: 0

grhu
grhu

Reputation: 470

Ok, changing font-size didn't help, but adding "line-height: normal" to inputs and text-area fixed the issue on iOS Safari. I've checked it also on other browsers and it look fine too. Right now the styles are:

::-webkit-input-placeholder (and other vendor specific selectors)
  color: #555555;
  text-indent: 1rem;
  white-space: normal;
}

And:

.form__input {
  font-family: 'Poppins', sans-serif;
  font-size: 1.6rem;
  width: 100%;
  border: none;
  text-indent: 1rem;
  transition: all 0.5s;
  padding: 0.5rem;
  border-radius: 0;
  line-height: normal;
}

Upvotes: 3

Related Questions