Search code examples
htmlcsssafarifooterparallax

Parallax footer not showing in Safari

I got this weird problem with a parallax footer I created. Take a look at this jsfiddle. I used the parallax footer in a design for a client. The jsfiddle is a simpler version of the code I'm using in the project.

The footer works fine in all browsers, even IE, but for some reason it refuses to work in Safari. So I found the problem:

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

Setting the height of html to 100% results in Safari not scrolling further after the last section, and thus not showing the footer. It looks like the margin I set on the section before the footer is completely ignored.

Does anyone know how to solve this problem?

Update: edited jsfiddle

Solution

  • You dont need to set the footer to position: fixed set the background attachment on the image to fixed instead. It creates the same effect:

    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

    UPDATE

    I think the best solution is to add an empty div with no background color as a spacer. Since you have a fixed amount for the bottom margin you can use that as a height instead:

    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