Адаптирую сайт под мобильные девайсы. Столкнулся с такой проблемой, как неправильное отображение моего input с айфона. С телефонов на андроиде всё в порядке. В консоли разработчика отображается тоже корректно.
Началось всё с того, что input отображался с закругленными углами. Я пофиксил это добавлением -webkit-appearance: none;
. Теперь проблема со смещением в 1-2 пиксела моей формы. Скрин формы с консоли разработчика - https://pp.vk.me/c629525/v629525181/40c5e/zrdadYwKeBU.jpg , девайс Iphone 5s. Скрин с моего айфона ниже. Второй день уже пытаюсь решить данную проблему. Может, кто-нибудь знает, в чём проблема?
<form id="subscribe">
<input type="text" class="enter-email" name="subscribe-email" id="subscribe-email" placeholder="YOUR EMAIL" spellcheck="false" />
<button type="submit" id="signup-button" class="signup-button c-form">NOTIFY ME</button>
<label for="subscribe-email" class="subscribe-message c-form"></label>
</form>
<!--css-->
.enter-email {
margin-top: 30px;
margin-left: 17.5%;
width: 40%;
font-size: 16px;
height: 50px;
background: none;
border: 2px solid white;
color: #fff;
text-align: center;
outline: none;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;}
.signup-button {
height: 50px;
border: 2px solid white;
color: white;
text-align: center;
padding: 5px;
font-size: 16px;
width: 25%;
background: #32dbd0;
margin-left: -6px;
transition: all 0.4s ease;}
::-webkit-input-placeholder {
color: #fff;
font-size: 16px;
text-align: center;
padding: 1px; }
@media screen and (max-width: 480px) {
.enter-email {
height: 45px !important;
font-size: 13px !important;
width: 50%;
margin-left: 10%;
margin-top: 8px !important;
border-radius: 0;
-webkit-appearance: none;
}
.signup-button {
height: 45px !important;
font-size: 12px !important;
width: 30%;
margin-left: -6px;
}
::-webkit-input-placeholder {
color: #fff;
font-size: 13px;
text-align: center;
padding-bottom: 3px;
}
}