html - Safari 中不显示视差页脚

Question

我创建的视差页脚遇到了这个奇怪的问题。看看这个jsfiddle .我在客户的设计中使用了视差页脚。 jsfiddle 是我在元素中使用的代码的简化版本。

页脚在所有浏览器中都能正常工作，甚至是 IE，但由于某种原因它拒绝在 Safari 中工作。所以我发现了问题:

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

将 html 的高度设置为 100% 会导致 Safari 在最后一部分之后不再滚动，因此不会显示页脚。看起来我在页脚之前的部分设置的边距被完全忽略了。

有谁知道如何解决这个问题？

更新:编辑 jsfiddle

Answer 1

您不需要将 footer 设置为 position: fixed，而是将图像上的背景附件设置为 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

更新

我认为最好的解决方案是添加一个没有背景色的空 div 作为分隔符。由于您有固定数量的底部边距，您可以将其用作高度:

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;
}

NEW FIDDLE