title: Image loses anti-aliasing after height transition
body: <p>I have the following code for my navbar:</p>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;a href="index.php" class="pull-left"&gt;&lt;img src="images/logo.png" alt="" /&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="navbar" class="navbar-collapse collapse"&gt;
              &lt;ul class="nav navbar-nav navbar-right"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Guides&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Here is the jQuery that handles the image shrinking:</p>
  
  <pre><code>$(window).scroll(function() {
      if ($(document).scrollTop() &gt; 50) {
          $('nav').addClass('shrink');
      } else {
          $('nav').removeClass('shrink');
      }
  });
  </code></pre>
  
  <p>Here is the CSS for the image shrinking:</p>
  
  <pre><code>.navbar-header img {
      height: 80px;
      transition: height 0.2s ease;
  }
  nav.shrink img {
      height: 60px;
      transition: height 0.2s ease;
  }
  </code></pre>
  
  <p>The problem is that the image loses its anti-aliasing in all browsers except Firefox when it does the transition. The image goes all jagged and looks terrible.</p>
  
  <p>I've tried the following fixes:</p>
  
  <ul>
  <li>adding .show() and .hide() to the image in the jQuery</li>
  <li>-webkit-backface-visibility: hidden;</li>
  <li>outline: 1px solid transparent;</li>
  <li>-webkit-transform-style: preserve-3d; </li>
  <li>-webkit-perspective: 1000;</li>
  <li>making the image background a solid color rather than transparent</li>
  </ul>
  
  <p>Literally nothing works. I've seen themes do this with no anti-aliasing issues and I'm lost on why this is happening.</p>
  
  <p>Any help would be greatly appreciated.</p>