Исправлена проблема позиционирования /z -index в мобильном сафари

Итак, сайт, о котором идет речь: http://kaye.at/baby

Основное содержимое ниже прокручивается вверху обратного отсчета и под навигацией, которые являются одновременно фиксированными элементами. Это отлично работает на рабочем столе, но на мобильном сафари, содержимое прокручивается позади обратного отсчета по мере того, как пользователь перемещается вверх, но как только сенсорный звук отпускается, он появляется спереди.

Просто интересно, является ли это ошибкой или что-то, что можно исправить?

Здесь CSS:

#header { position: fixed; width: 100%; top: 0px; z-index: 10; }
#content { width: 100%; position: relative; top: 650px; z-index: 7; }
#banner { position: fixed; width: 100%; position: fixed; background: url('http://kaye.at/baby/img/stork.jpg') no-repeat center bottom #fff;  padding-top: 185px; z-index: 1; }
#defaultCountdown { max-width: 70%; height: auto; }

И HTML (основная структура):

<div id="header">
    <div id="nav">
        <ul>
            <li><a class="active" href="index.php">START</a></li>
            <li><a href="ultrasound-images.php">ULTRASOUND PICS</a></li>
            <li><a href="pinkorblue.php">PINK OR BLUE?</a></li>
        </ul>
    </div>
</div>

<div id="banner">
   <div id="defaultCountdown"></div>
</div>

<div id="content">
</div>

Ответ 1

Уг потрясающий. Просто нужно было добавить:

-webkit-transform: translate3d(0,0,0);

в div #content.

Ответ 2

Для Mobile Safari лучше избегать использования позиции: fixed

Убедитесь, что вы используете такой CSS для своего прокручивающегося контейнера и всех его дочерних элементов

.scrolling-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.scrolling-container .child-element {
    position: relative;
    -webkit-transform: translate3d(0,0,0);
}

Ответ 3

Если вы применяете #banner {z-index:-1} и body {background:transparent}, ваша проблема должна быть решена.