Блог

У меня есть некоторые проблемы с использованием flex в safari. Когда я пытаюсь центрировать содержимое во входных данных, это имеет какой-то странный эффект:

CSS — это

 input[type=submit] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    max-width: 386px;
    height: 47px;
    margin: auto auto 0;
    font-size: 1.25em;
    line-height: 24px;
    color: #fff;
    background-color: #d08b4d;
    border-radius: 24px;
    -webkit-box-shadow: 3px 5px 10px rgba(0, 0, 0, .1);
    box-shadow: 3px 5px 10px rgba(0, 0, 0, .1);
    padding: 0;
    border: none;
    outline: 0;
    cursor: pointer
}
  

Тот же код, который я применяю к div, все в порядке, содержимое занимает центральное положение в блоке.
Html этой части кода

 <form>
<h3 class="form-title">Send a message</h3>
<input type="text" name="name" title="name" placeholder="Name" required>
<input type="email" name="email" title="email" placeholder="Email" required>
<textarea name="message" id="" title="message" placeholder="Message" required></textarea>

<input type="submit" value="Send">
</form>
  

В других браузерах у меня нет никаких проблем, как для мобильных, так и для настольных компьютеров. Этот код был протестирован в safari> 7.
Есть ли какое-то собственное решение css?

Я искал эту проблему в Safari 9.1.2, и мне помогла центрировать элементы старая спецификация Flexbox 2009 года:

 display: -webkit-box;
-webkit-box-pack: center; /* justify-content */
-webkit-box-align: center; /* align-items */
  

Попробуйте удалить display: flex; и посмотрите, работает ли это для вас.