1

Running into an odd issue in Safari/iOS. I have the following code.

HTML: 

<div class="content">
  <p>Hello World</p>
  <div class="footer">
    <p>This is the footer</p>
  </div>
</div>

CSS:

.content {
    border: 1px solid orange;
    overflow-x: hidden;
    position: relative;
    z-index: 0;
}

.footer {
    background: pink;
    width: 100%;
    position: fixed;
    bottom: 0;
}

Working example:

http://run.plnkr.co/ZgGFJgMf0atvbiyC/

The scenario:

I have a footer div positioned to the bottom of the viewport with position: fixed. This is child element of a wrapper div for the entire page content.

The problem:

The above works just fine in Chrome. In Safari (and iOS), however, notice that the footer can't be seen. It's there...but the parent div isn't as tall as the viewport, so the footer can't be seen.

Removing any one of the following from the .content div fixes things: overflow-x, position, z-index.

Why?

For this example, the easy fix, of course, is to simply remove of of those attributes, but the issue is that I'm debugging an existing site with about a 1000 lines of HTML and 30k+ lines of CSS. Yes, a bit of a mess. But it's what I have. I'm a bit hesitant to just remove one of those styles without first understanding the issue fully.

DA.
  • 39,848
  • 49
  • 150
  • 213
  • Why would you use the "position: relative;" property for the main container? – TamirNahum Dec 21 '17 at 00:43
  • Does this question help you at all? https://stackoverflow.com/a/19843662/9104680 – Derek Hopper Dec 21 '17 at 00:56
  • @TamirNahum who knows? I'm sure someone put it there to fix something else. Hence my apprehension about just diving in and changing things. Perhaps it's part of a float clear. – DA. Dec 21 '17 at 04:26
  • @DerekHopper that might be a solution. Would require some template changes but I'd feel safer doing that rather than messing with previous people's CSS. – DA. Dec 21 '17 at 04:27

0 Answers0