Sticky footer in Foundation 6 doesn't always anchor

Question

I have set up a sticky footer in an HTML page. I want it to stick to the bottom of the page and anchor at the bottom of the content section. Code:

`<div id="content" class="row">`
    `<div class="columns large-12" style="width: 100%; height:400px;">`
         `<!--Main content here-->`
    `</div>`
`</div>`
`<div class="row ">`
     `<div class="footer large-12 sticky" data-sticky data-stick-to="bottom" data-top-anchor="content:bottom">`
          `<div class="text-center">`
               `<!--footer content here-->`
          `</div>`
     `</div>`
`</div>`

In order to test, I styled the content and footer divs with borders. The footer sticks to the bottom, but if I resize the browser by moving the bottom of it up without stopping, the footer does not anchor to the bottom of the content div.

However, if I move the bottom of the browser window up and stop when the top border of the footer is on the bottom border of the content div I can actually see it attach to the bottom of the content div, and it stays attached when I again move the bottom of the browser up.

The same thing happens on the way down after the footer has attached to the contend div: if I pull the bottom of browser window down and stop when I see the bottom of the content div, when I start pulling it down again, it detaches from the content div and sticks to the bottom.

Is there any way to fix this so that it works correctly if a user resizes the browser this manner?