title: Unwanted border around background image div
body: <p>I am getting a slight line or border around my background image. I am dynamically changing the height of the parent div via javascript so that the inner div (which has the background image set) will "stick" to the bottom of the window. </p>
  
  <p>No line appears on the desktop browsers, but on the mobile browser after the script runs, there is usually a thin border around it:</p>
  
  <p><img src="https://i.stack.imgur.com/anVAs.jpg" alt="enter image description here"></p>
  
  <p>The border is on the left and the way it should be is on the right. Any suggestions?</p>
  
  <p>This is the script: </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function layoutHandler(){
      if(window.innerHeight &gt; 1061){
      var newsize = 150 + (window.innerHeight - 1061);
  
          document.getElementById("footerwrapper").style.height = newsize+'px';
      }
      else {
          document.getElementById("footerwrapper").style.height = '150px';
      }
  }
  window.onload = layoutHandler;
  
  window.onresize = layoutHandler;
  layoutHandler();
  &lt;/script&gt;
  </code></pre>
  
  <p>And then the inner div is setup like so:</p>
  
  <pre><code>#inner {
      background-color: #FFF;
      padding: 0px;
      height: 150px;
      bottom: 0px;
      width: 100%;
      position: absolute;
      background-image: url(Images/grad.png);
      background-repeat: repeat-x;
  }
  </code></pre>
  
  <p><strong>Edit:</strong>
  Okay, after testing this a bit more I narrowed down when it happens. (This might get frustratingly specific) It happens most noticeably on the iPad in portrait mode. I turned off the "repeat-x" and it goes away completely. That led me to try a much wider background image which would not be repeating within the width of the iPad and it took away this issue. Any ideas why the heck this is happening? </p>