Повседневное поведение изображения

Question

У меня возникло странное поведение изображения на разных устройствах.

Я тестировал сайт на компьютере 1920x1080, 1440 x 900 Mac и 1920x1080 iPhone.

Куда все выглядят хорошо.

Однако, прося других проверить его. С их стороны они резко отличаются друг от друга.

Вот что он должен выглядеть следующим образом:

В «графические» (устройства, и окна) расположен в верхней части экрана.

Однако это то, что он выглядит на Ipad:

графическое изображение, по какой-то причине получает отображается очень далеко вниз на этой странице.

Там та же проблема, с помощью Firefox на Linux

Я havn't сделал ничего, чтобы расположить его в HTML. Вот соответствующий код:

<header> 
    <div class="header-content"> 
     <div class="header-content-inner"> 
      <img src="/img/graphic.png" class="img-graphic"> 
      <!-- <h1>Experience new technological breakthroughs in the field of investing</h1> 
      <hr> --> 
      <p style="padding-top: 10px">What if it was possible to identify some of the next years' winners in the markets today with an 83%, 90%, or 95% average success rate?<sup>*</sup></p> 
      <a id="read_more" href="#formula-stocks" class="btn btn-primary btn-xl page-scroll" style="opacity: 1!important">Would you be interested?</a> 
      <a id="signup-a-btn" href="/register" class="btn btn-primary btn-xl">Sign Up for Free</a> 
      <br /><sub><small>(*) Based on averages of cumulatively 9,800 recommendations.</small></sub> 
     </div> 
    </div> 
</header> 

А вот соответствующий CSS для него:

header { 
    position: relative; 
    width: 100%; 
    min-height: auto; 
    text-align: center; 
    color: #FAFAFA; 
    background-image: url("../img/header-2.jpg"); 
    background-position: bottom; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover 
} 

.img-graphic { 
    max-width: 100%; 
    text-align: center 
} 
header .header-content { 
    position: relative; 
    width: 100%; 
    padding: 100px 15px; 
    text-align: center 
} 

У меня нет ничего, что я могу видеть, может вызвать изображение, чтобы быть расположены так далеко от вершины на некоторых устройствах?

«Графический» сам по себе просто так:

У него есть некоторое пространство на стороне. Но ничего выше этого, это должно привести к этому поведению, насколько мне известно.

У меня есть код @media в моем коде, который приведен ниже, если это имеет к этому какое-либо отношение.

@media (min-width: 768px) { 
    header { 
     min-height: 100% 
    } 
    header .header-content { 
     position: absolute; 
     top: 50%; 
     padding: 0 50px; 
     transform: translateY(-50%) 
    } 
    header .header-content .header-content-inner { 
     margin-right: auto; 
     margin-left: auto; 
     max-width: 1000px 
    } 
} 

Любая помощь в выяснении того, как исправить это странное поведение на Linux/Ipad, была бы весьма признательна!

Спасибо!

Answer 1

Это будет ваш home.min.css, линии 1009 и 1011, с (не имеет значение кода удалена):

@media (min-width: 768px) { 
    header .header-content { 
     top: 50%; 
     transform: translateY(-50%); 
    } 
} 

По состоянию прошивки 8.4, Mobile Safari doesn't support transform, только -webkit-transform.
Добавить строку

-webkit-transform: translateY(-50%); 

к этому селектору, и вы должны быть хорошо идти.