title: CSS transition snaps on left side when max-width changes
body: <p>I have a simple <code>'.full-width'</code> class that I'm adding and removing to a <code>&lt;nav&gt;</code> when the user scrolls past a banner. The goal is to gradually expand or shrink the <code>&lt;nav&gt;</code> when the user scrolls above or below the banner. As you can see from the example CSS, the nav has the <code>transition</code> property set.</p>
  
  <p>For some reason, the <code>&lt;nav&gt;</code> is snapping back on the left side when the bar expands. The bar still transitions correctly on the right side, and shrinking the bar works perfectly.</p>
  
  <p>Interestingly, this appears to work fine with Bootstrap 3, but something in Bootstrap 4 is causing the navbar to snap.</p>
  
  <p>Anyone see something I'm missing?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var NAVBAR_HEIGHT_IN_PX = 50;
  
  $(document).ready(function() {
    var bottomOfBannerContainer =
        $('.banner-container').offset().top +
        $('.banner-container').outerHeight(true) -
        NAVBAR_HEIGHT_IN_PX;
  
    $(window).scroll(function() {
      if ($(document).scrollTop() &gt;= bottomOfBannerContainer) {
        $('#navbar').addClass('container');
        $('#navbar').removeClass('full-width');
      } else {
        $('#navbar').addClass('full-width');
        $('#navbar').removeClass('container');
      }
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#navbar {
    transition: all 0.8s ease;
  }
  
  .banner-container {
    width: 100%;
    min-height: 200px !important;
    background: blue;
  }
  
  .full-width {
    max-width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;nav id="navbar" class="navbar navbar-fixed-top navbar-dark bg-inverse full-width"&gt;
    &lt;a class="navbar-brand" href="#"&gt;Hello S/O!&lt;/a&gt;
  &lt;/nav&gt;
  
  &lt;div id="content" class="container"&gt;
    &lt;div class="text-center col-xs-12 banner-container"&gt;workplz&lt;/div&gt;
  
  &lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;&lt;p&gt;Content!&lt;/p&gt;&lt;br&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>