0

Адаптирую сайт под мобильные девайсы. Столкнулся с такой проблемой, как неправильное отображение моего 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;
    }
}
5
  • Можно увидеть саму страницу?
    – user31906
    15 апр 2016 в 18:39
  • @mJeevas коммерческий проект. Могу предоставить только изображение. 15 апр 2016 в 18:42
  • Тогда создайте полностью воспроизводимый пример, который будет отображаться правильно хотя-бы в десктопных браузерах, без всех там коммерческих частей. Сейчас ваш пример у меня отображается даже не так, как вы показываете.
    – user31906
    15 апр 2016 в 18:51
  • @mJeevas codepen.io/Zharkov/pen/WwJQwx . Смотрел с телефона. Проблема повторяется 15 апр 2016 в 19:19
  • По прежнему дублирование стилей в элементарную html страничку дает некорректный результат. Как вариант попробуйте отказаться от использования button
    – user31906
    15 апр 2016 в 19:38

1 ответ 1

3

Удалось повторить вашу проблему в safari на ios, стало корректно отображаться после обнуления padding и margin

button, input {
    margin: 0;
    padding: 0;
}

Демо: http://codepen.io/anon/pen/grzPEv

body {
  background: rgba(0, 0, 0, .50);
  ;
}
button,
input {
  margin: 0;
  padding: 0;
}
.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;
  border-radius: 0;
  -webkit-appearance: none;
}
.signup-button {
  height: 50px;
  border: 2px solid white;
  color: white;
  text-align: center;
  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;
  }
}
<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>

Привяжете правило к нужным элементам сами.

2
  • Спасибо, работает. Где же вы раньше были?) Пришлось другим способом решать, через бутстраповские стили. 16 апр 2016 в 0:09
  • Мимо проходил )
    – Invision
    16 апр 2016 в 0:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.