title: img inside hidden div pixelated for a short time when shown
body: <p>I suppose this had been answered before, but I couldn't find a similar issue on the web.</p>
  
  <p>I have an img element inside a hidden div (a side menu). It is not hidden actually, it is an absolutely positioned div residing outside of the body borders. When user clicks a button to open the menu, I make use of jQuery's animate to move it back into the viewport by playing with its left property. The setup is as follows:</p>
  
  <pre><code>.menu { 
      .
      .
      .
      width: 200px;
      position: absolute;
      left: -200px;
  } 
  </code></pre>
  
  <p>When user clicks the button to open the menu, I run this animation:</p>
  
  <pre><code>$('.menu').animate({
          left: "+=200"
      },
      500,
      function() {
          // stuff here
      }
  );
  </code></pre>
  
  <p>The problem is, when this animation is completed, the img inside the menu is pixelated for a short period of time, like 3 seconds, then it renders correctly. This happens everytime I close and open the menu again. How can I solve this? </p>
  
  <p>EDIT</p>
  
  <p>I've prepared a fiddle, but couldn't reproduce the issue in the fiddle. Image renders with no problem in the fiddle. I am posting the link here anyway, maybe that could help to understand the setup. Could the reason be other elements present in the document at the time of the animation? Or could it be about hte size of the image?</p>
  
  <p><a href="http://jsfiddle.net/j5aecuqx/" rel="nofollow">http://jsfiddle.net/j5aecuqx/</a></p>