Flexbox bug in Safari 9.0.1

The site footer is displayed at exactly below 100% page height, rather than automatically at the bottom of the page.

Because flex: 1 100% is set on the element #content (parent of which is #main which has the property flex-direction: column), this causes the height of the #content element to be fixed at 100%, which is what causes the display bug in Safari for both OS X and iOS. The footer gets bumped up to that position, obscuring the body text.

Here are the two problematic lines of code:

cosmos-book.github.io/resources/style.css

Lines 348 to 349 in 3ca5152

    
           -webkit-flex: 1 100%; 
        
           flex: 1 100%;

Let me know if you want a pull request.

@opattison Thanks for the comment. I can't recreate the problem from the screenshot on Safari 5.1.10 (or FF or Chrome). On pages with infographics, the aim was to make the infographic itself fill the viewport and have the footer sat below that.

@slowe I’m seeing the issue on both iOS (iPad) and Mac Safari. Also tested in Chrome, with no problems at all.

It’s on both infographics and the main contents page.

Here’s another example:

This may be a flexbug: https://github.com/philipwalton/flexbugs

Also, I found a fix that works across both browsers:

#content {
  flex: 0 auto;
}

By setting flex-basis to auto instead of 100%, Safari and Chrome exhibit the same (intended) layout behavior. Even if this is a bug in webkit’s implementation, this is cross-browser compatible and valid.

Using
#content { flex: 0 auto; }
breaks pages in Firefox. Does the following work in the latest Safari (I can't test it as I only have older Safari)?
#content { -webkit-flex: 0 auto; flex: 1 100%; }

Hm – not sure how much I can help further on this one, but I’m looking into it again. This code:

#content {
  flex: 0 auto;
}

aka (long-form)

#content {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

works well in my tests in dev tools for Firefox, Safari and Chrome. flex: 1 auto should also work. The only issue is setting flex-basis to 100% (which I don’t think the -webkit prefixed fallback can fix unfortunately). This fails in Safari because 100% of the height calculates to only the viewport height. I’ve looked at the spec a bit and I’m not sure whether Safari or Firefox/Chrome are interpreting it incorrectly, but I assume it is Safari.

If you want a really hacky fix, change it to #content { flex: 1 100%; -webkit-flex: 0 auto; } and Safari 9 will play nicely! Putting the vendor prefix second does override the problematic behavior. I don’t know the lifespan of that fix, but it does work (tested in OS X Safari 9.0.1 – it also should be Chrome-friendly but I haven't tested it except briefly).

The hacky fix doesn't work in Chrome as the element is given 0px height. Does

#content { -webkit-flex: 1 auto; flex: 1 auto; }

work for Safari 9? That seems to be OK in Chrome, Safari 5.1 and Firefox.

That works! 👍