title: jQuery fadeIn() of TR clips background
body: <p>If I do a fadeIn() that changes the dimensions of a table, Firefox clips the background of the newly shown rows.</p>
  
  <p><img src="https://i.stack.imgur.com/lOYGI.png" alt="clipped background"></p>
  
  <p>If I click focus away from the tab, and then click back, the background is restored.</p>
  
  <p><img src="https://i.stack.imgur.com/uYhbu.png" alt="proper background"></p>
  
  <p>There is no clipping issue in Chrome.  I'm on Firefox 26</p>
  
  <p>See <a href="http://jsfiddle.net/axiomx11/g5MhM/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(function () {
      $(".small-link").on("click", function (event) {
          $(".showfields").fadeIn(250);
      });
  });
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.head {
      background-color: green;
      color:white;
  }
  .hidden {
      display:none;
  }
  .small-link {
      cursor:pointer;
  }
  table {
      border:1px solid red;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;a class="small-link"&gt;Click this&lt;/a&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="hidden showfields"&gt;
          &lt;td&gt;........................................&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="head hidden showfields"&gt;
          &lt;th&gt;Table Head&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Notes:</p>
  
  <ol>
  <li>Just showing the TR works, but I would like to fade it if I can</li>
  <li>Fading the TH and TD instead do fix the issue for this simple case, but won't work for my actual code</li>
  </ol>