Нижний колонтитул параллакса не отображается в Safari

Question

У меня странная проблема с нижним колонтитулом параллакса, который я создал. Взгляните на этого jsfiddle. Я использовал нижний колонтитул параллакса в дизайне для клиента. Jsfiddle - это более простая версия кода, который я использую в проекте.

Нижний колонтитул прекрасно работает во всех браузерах, даже в IE, но по какой-то причине он отказывается работать в Safari. Итак, я нашел проблему:

body,html {
    margin:0;
    width: 100%;
    height: 100%;
}  

Установка высоты HTML до 100% приводит к тому, что Safari не прокручивается дальше после последнего раздела и, следовательно, не показывает нижний колонтитул. Похоже, поле, которое я установил в разделе, прежде чем нижний колонтитул полностью игнорируется.

кто-нибудь знает, как решить эту проблему?

Обновление: отредактировано jsfiddle

Answer 1

Вам не нужно устанавливать footer в position: fixed вместо этого установите фиксированное вложение фона на изображении. Создает тот же эффект:

footer {
   padding-top: 50px;
   background: url(..imagepath..) fixed; //can change to just 'background' and add `fixed`
   color: white;
   width: 100%;
   height: 200px;
   bottom: 0;
   text-align: center;
   overflow: hidden;
   /*position: fixed;*/ //remove
   /*bottom: 0;*/ //remove
   /*z-index: -1;*/ //remove
}

FIDDLE

ОБНОВИТЬ

Я думаю, что лучшее решение - добавить пустой разделитель без цвета фона в качестве разделителя. Поскольку у вас есть фиксированная сумма для нижнего поля, вы можете использовать ее как высоту:

HTML

<section>
   <h1>Scroll down</h1>
</section>
<div class="spacer"></div> <!--add-->
<footer>
   ....

CSS

footer {
   padding-top: 50px;
   background-color: #181818;
   color: white;
   width: 100%;
   height: 200px;
   position: fixed;
   bottom: 0;
   z-index: -1;
   text-align: center;
   overflow: hidden;
   /*margin-bottom: 250px;*/ //remove
}

.spacer{
   height: 250px;
}

НОВАЯ СКРИПКА