title: Background size percentage appears different in Firefox and Webkit
body: <p>I have a responsive circular div (made using % width, 0 height, % padding-bottom and 50% border radius) with a background gradient. If the background size is altered, they do not match in webkit / Firefox</p>
  
  <p>with background-size 100% / auto they both match as expected:
  <img src="https://i.imgur.com/BxLeSO9.png" alt="Imgur">
  <img src="https://i.imgur.com/92sjxQ8.png" alt="Imgur"></p>
  
  <p>but when i set background-size to other sizes they differ (auto 200% shown in images). Safari and Chrome show the image as expected, but firefox does not.
  Webkit:
  <img src="https://i.imgur.com/K3Ww73Q.png" alt="Imgur">
  Firefox:
  <img src="https://i.imgur.com/k4XBDFi.png" alt="Imgur"></p>
  
  <p>If I set the background-size to auto 300% it then displays correctly in Firefox but is then too big in webkit. If I use -moz-background-size to set Firefox to a different setting, newer versions just use the background-size instead. If I use -webkit-background-size to set webkit to the smaller version, they also get overwritten by the background-size property</p>
  
  <p>Styl:</p>
  
  <pre><code>.glasses
      display none
      width 8%
      height 0
      padding-bottom 8%
      border-radius 50%
      position absolute
      top 37.6%
      z-index 3
      transform none
      background linear-gradient(135deg, rgba(234,246,254,1) 25%,rgba(10,39,58,1) 25%,rgba(10,39,58,1) 50%,rgba(10,39,58,1) 50%,rgba(234,246,254,1) 50%,rgba(234,246,254,1) 50%,rgba(234,246,254,1) 75%,rgba(10,39,58,1) 75%,rgba(10,39,58,1) 100%); /* W3C */
      background-size auto 200%
      background-position 0% 0%
      transition none
  &amp;.left
      left 40.2%
  &amp;.right
      right 40.2%
  &amp;:hover
      .glasses
          transition background-position 0.2s
          background-position 0% -200%
  </code></pre>