Flexbox sticky footer not working in Safari or Chrome OSX
<p>I have added a sticky footer to a SharePoint master page using the flexbox method, and it is working fine in all browsers on Windows, but does not work correctly for Safari or Chrome on OSX.</p>

<p>The HTML is roughly as follows:</p>

<pre><code>&lt;body&gt;
    &lt;form&gt;
        &lt;!-- 
            a whole bunch of SharePoint stuff here that I can't mess with 
         --&gt;
         &lt;div id="s4-workspace"&gt;
             &lt;div id="s4-bodyContainer"&gt;&lt;/div&gt;
             &lt;div id="footer"&gt;&lt;/div&gt;
         &lt;/div&gt;
    &lt;/form&gt;
&lt;/body&gt;
</code></pre>

<p>And my initial CSS is this:</p>

<pre><code>#s4-workspace {
    display: flex;
    flex-direction: column;
}
#footer {
    clear: both;
    height: 100px;
    min-height: 100px;
    width:100%;
    background-color: #2e2e2e;
    font-size: 11px;
    margin-top: auto;
}
</code></pre>

<p>Now after searching around a bit I found <a href="https://stackoverflow.com/q/23642341/988264">this question</a>, and based on that I started playing around with all kinds of vendor prefixes, and I even realized that the way I was using the flexbox was maybe a little unorthodox.  Instead of having the main content div <code>#s4-bodyContainer</code> grow to use extra space, I was getting the footer div to expand it's top margin up to fill any extra space, which I guess flexes the <code>#s4-workspace</code> to fill the viewport if necessary.</p>

<p>So then I tried adding</p>

<pre><code>#s4-bodyContainer {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
</code></pre>

<p>But that didn't help either (and actually started causing problems in IE on Windows, which had worked fine before).</p>

<p>The behavior that I'm trying to fix in Safari and Chrome on OSX is this:</p>

<p>When the page renders, it seems as though the footer calculates it's top margin based on the viewport.  It is always initially sitting at the bottom of the window, as if it was the case that there was little content and it should push down to the bottom of the window.  But this happens even if there is a lot of content flowing underneath it, and it really should have pushed down to below <code>#s4-bodyContainer</code> (out of the viewport).  If I scroll the page, it just sits on the page exactly where it was initially drawn and remains covering whatever content was under it on the initial rendering.</p>

<p>What can I do about this?  What secrets are out the for getting flexboxes working correctly on OSX?</p>