Bootstrap 3 and IE11 clash. Flushing footer to bottom of the page, twitter bootstrap

Problem:

I was having issues with my site in IE 11.  Chrome and other browsers were doing fine.
The site navigation bars would not work with the vertical scroll.  The behavior was quite ugly.  The page would render correctly and the navigation menus would work fine.  As soon as the user scrolled the fixed horizontal navigation bar would spread all over the screen.  The only way to get the browser to redraw the screen was to resize the window.  This is hardly a state I can hand over a solution to a customer.:

Solution:

This was a footer and bootstrap problem.  First issue was that the main screen was using a fixed position reference which would not work properly in ie 11. 


{
  position:fixed;
}


The fixed property forced the footer to stay in place but the navigation bar would bleed into the main work area. 


Step 1: Removed the fixed position but then the footer started to move around. 


Step 2: The final fix was to use the bootstrap css class,navbar-fixed-bottom, this forced the footer to stay in place.


<div class="navbar-fixed-bottom">
...
</div>

Source:

1. http://stackoverflow.com/questions/10099422/flushing-footer-to-bottom-of-the-page-twitter-bootstrap
2. https://getbootstrap.com/examples/navbar-fixed-top/
3. https://getbootstrap.com/components/#navbar
4. http://getbootstrap.com/components/#navbar-fixed-bottom