Safari not displaying the parallax footer

I've come across an interesting issue with a parallax footer I designed. You can take a look at the code on this jsfiddle. This jsfiddle serves as a simplified version of the code used in a project for a client.

While the footer functions correctly in all browsers, including IE, it doesn't seem to work properly in Safari. After some investigation, I discovered the root of the issue:

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

By setting the height of html to 100%, Safari stops scrolling after reaching the last section, failing to display the footer. It appears that the margin specified on the section preceding the footer is being disregarded entirely.

Has anyone encountered this problem before and found a solution?

Update: modified jsfiddle

htmlcsssafarifooterparallax

Answer №1

Instead of setting the footer to position: fixed, try setting the background attachment on the image to fixed. This will achieve 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

To create space at the bottom, you can add an empty div with no background color as a spacer. Use the fixed margin as the 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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

jQuery templates sometimes display conditions as commas only in Internet Explorer

I am encountering a significant challenge; is there anyone who can shed light on why the below statement appears as a comma in IE? {{if (true)}} It seems to be similar to the one provided below. {{/if }} ...

jqueryhtmljquery-templates

What is the reason behind the additional height created by line-height?

<div><iframe style="height: 100px"></iframe></div> <div style="line-height: 0"><iframe style="height: 100px"></iframe></div> Click here to view the code snippet on jsFiddle. Upon inspecting the DOM, it is e ...

htmlcssiframe

Tips for aligning the first row of a table with a line of text

I need assistance aligning the first row of a table with a line of text. Specifically, I am trying to achieve ** some text ** |first row of table      |             ...

htmlcss

Align Bootstrap rows within separate columns

Following is the layout breakdown: Green: row Purple: column Blue, Orange, Gray: a row respectively The green rows can stack on smaller screens. How do I achieve this layout? Currently, the greens are not available to stack, but I can align the blue, ora ...

cssbootstrap-4

Can the floated DIVs be prevented from breaking onto a new line if they exceed the container's width?

Take a look at this sample HTML code: <div id="container" style=""> <div id="left" style="float: left; width: 200px;">...</div> <div id="right" style="float: right; width: 100px;">...</div> </div> How can we prevent ...

htmlcss

Ways to eliminate decimal values appearing in a form field that are automatically being populated from the backend system

I am trying to input only integer values in my form field using the Ruby MoneyRails gem. The field name in the database is amount_paisas, but when displayed in the form, it shows 0.00. I specifically need it to display as 0. How can I prevent decimal value ...

htmlruby-on-rails-3input

Show SVG in img tag on entire screen

I am facing an issue where my SVG image is not fully visible when displayed within an img tag on the browser's full screen. The bottom part of the image gets truncated, making it inaccessible to users. Below is the code snippet I have been using: ht ...

htmlcsssvg

Creating a pie chart using Highcharts in a Django framework

Trying to create a pie chart in Django with data from my "Results" model. The model has two fields: +--------+------------+ | result | date | +--------+------------+ | passed | 2017-03-30 | | passed | 2017-02-30 | | passed | 2017-03-30 | | faile ...

javascriptcssdjangotwitter-bootstraphighcharts

Is it possible to size a child div to be larger than its parent without using absolute positioning?

I'm trying to figure out a way to have one or two divs on a page that are larger than their parent div without having to overhaul the entire website structure. I originally considered using position absolute, but that would mess up the container heigh ...

htmlcsscss-position

jQuery .html() function malfunctioning

I am just starting out with front-end development and have taken on the challenge of creating a simple Tic Tac Toe game using HTML5. To set up the game board, I decided to use a table element in my code. Below is the snippet of HTML that I have implemented ...

javascriptjqueryhtmlweb-applicationsfrontend

Having trouble with my JQuery selection

In the code below, I have assigned an id of "song-pick." $("#archive").append("<div id=\"song-pick\" data-song=\""+song.rank+"\" class=\"box small back"+counter+"\"><span>"+song.title+"</span></div>"); ...

javascriptjqueryhtml

Ways to add margin-top to a card element without affecting the entire container-fluid

I'm attempting to change the background image of this container, but when I add margin-top to the card element, it shifts everything over the picture. Below is my Bootstrap4 code: #card.container-fluid { background-image: url("../images/picture2. ...

htmlcssbootstrap-4

Is there a way to modify both an icon and text's color simultaneously when hovering with the mouse?

Recently, I created 3 icons with text underneath. You can view the code here. An issue arises when hovering over an icon - only the icon turns red while the text remains grey. However, if you hover over the text first, both the icon and text turn red. My ...

htmlcsstexthovericons

Leveraging $implict for transferring several parameters

Need help with creating a recursive template that can accept multiple parameters: <ng-container *ngTemplateOutlet="testTemplate; context: {$implicit:jsonObj1}"> </ng-container> <ng-template #testTemplate let-Json1> </ng-template> ...

htmlangular

Boosting vertical reach within a distance

How to make the green div adjust its height based on the content like the red div? This means that when the text in the green box increases, the height of the red box should also increase to match it. I am aware that removing the span from .aaa might solve ...

htmlcssflexbox

Ways to resolve navbar toggler issue in Bootstrap 4

My problem lies in creating a responsive navbar using bootstrap. On smaller screens, the toggler in the navbar ends up overlapping the logo instead of aligning to the left. I've attempted to add containers around the elements to fix this issue but to ...

htmlcssbootstrap-4

Styling unfocused selected rows in JavaFX TreeTableView with CSS

I am experiencing an issue with CSS on TreeTableView. When I apply CSS to TableView like this : .table-row-cell:selected{ -fx-background-color: #f1734f; -fx-background-insets: 0; -fx-background-radius: 1; -fx-table-cell-border-color: white ...

cssjavafxtreetableview

How can a borderless text field be created using Material UI?

Today, I delved into using Material UI for my React project. My goal is to create a registration form similar to this one. Essentially, I want 5 input text fields without any borders and with a simple background color effect when active. However, I'm ...

cssreactjsmaterial-ui

What is the best way to dim the main content/canvas of a website when the side menu is displayed

Currently, I am utilizing Bootstrap 3 with the Jasny Off Canvas Reveal Menu template. You can view it here: Everything is functioning well, but I have a specific goal in mind. I want to achieve a similar effect as seen on this site when clicking the hambu ...

jquerycssinternet-explorer-8twitter-bootstrap-3jasny-bootstrap

tips on finding and obtaining the value of a herf

<a class="wiki-link-external" href="http://example.com" target="_blank" rel="nofollow noopener" title="http://example.com"> I am attempting to retrieve http://example.com My approach involved img = ...

pythonhtmlseleniumselenium-webdriverweb