title: background-size:contain cuts off image edges in Firefox
body: <p>Let's say that this is my HTML.</p>
  
  <pre><code>&lt;div id="spirit_tutorial_reward"&gt;
     &lt;div id="spirit_tutorial_reward_icon" style="background:url({$MEDIA_IMAGE_DOWNLOAD_PATH}appimages/gift_icon_spirit.png) no-repeat;background-size: contain;"&gt;&lt;/div&gt;
     &lt;div id="spirit_tutorial_reward_header"&gt;45 Spirit&lt;/div&gt;
     &lt;div id="spirit_tutorial_reward_text"&gt;Use Spirit to recruit new Rusherz in the Locker Room!&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is my styling:</p>
  
  <pre><code>#spirit_tutorial_reward
  {
      position:absolute;
      top:77px;
      left:371px;
      width:45%;  
  }
  #spirit_tutorial_reward_icon
  {
      background:url(../images/gift_icon_spirit.png) top no-repeat;
      width:60px;
      height:60px;
      position:absolute;
      top:0px;
      left:0px;
      float:left; 
  }
  #spirit_tutorial_reward_header
  {
      font-size: 15px;
      font-family:"NFLEndzoneSansBold";
      color: #000;
      position:absolute;
      left:69px;
      top:0px;
      float:left; 
  }
  
  #spirit_tutorial_reward_text
  {
      font-size: 15px;
      font-family:"NFLEndzoneSansBold";
      color: #000;
      position:absolute;
      left:69px;
      top:22px;
      float:left; 
  }
  </code></pre>
  
  <p>On no-zoom or normal mode , the images appear to have chopped off on Firefox (see attached image) but when I zoom my page , the image appears to becoming better (see attached image). I am facing this issue only in Firefox. Can anyone here help me out. <img src="https://i.stack.imgur.com/PvWCM.png" alt="without zoom"> <img src="https://i.stack.imgur.com/xjrbH.png" alt="with zoom"></p>
  
  <p>EDIT : <a href="http://jsfiddle.net/bbruG/" rel="nofollow noreferrer"><strong>FIDDLE demo for the problem</strong></a></p>