title: How to prevent half-pixel SVG shift on high pixel ratio devices (Retina)?
body: <p>I have a HTML webpage with SVG image. I get a problem (excess white line, shown on the picture below) on the webpage when I visit it using iOS Safari or Android Browser. The screenshot resolution is 2x, the saw edge is a SVG image.</p>
  
  <p><a href="https://i.stack.imgur.com/2Ipo4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/2Ipo4.png" alt="Expectation vs. result"></a></p>
  
  <p>I've found out that it happens when the page Y-position of the SVG image is not an integer amount of CSS pixels (<code>px</code>), i.e. with ½<code>px</code>. The browser rounds the SVG image position to integer <code>px</code> when it renders the webpage while doesn't round the other elements positions. That's why the ½<code>px</code> line appears.</p>
  
  <p><a href="https://i.stack.imgur.com/wMIo1.png" rel="noreferrer"><img src="https://i.stack.imgur.com/wMIo1.png" alt="Explanation"></a></p>
  
  <p>You can reproduce the problem using the snippet below (or <a href="http://codepen.io/TheFinesse/pen/Mmxyjo?editors=1100" rel="noreferrer">this CodePen</a>). You should run the snippet on a device with a high pixel density. You can also reproduce it in desktop Safari if you go to the responsive design mode and pick iPhone or iPad.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.common-bg {
    background: #222;
    fill: #222;
  }
  .block {
    max-width: 300px;
    margin: 20px auto;
  }
  .block_content {
    height: 50.5px;
  }
  .block_edge {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="block"&gt;
    &lt;div class="block_content common-bg"&gt;&lt;/div&gt;
    &lt;svg
      class="block_edge"
      width="100%"
      height="10"
      xmlns="http://www.w3.org/2000/svg"
      version="1.1"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    &gt;
      &lt;defs&gt;
        &lt;pattern id="sawPattern" x="50%" width="20" height="10" patternUnits="userSpaceOnUse"&gt;
          &lt;path d="M 0 0 L 10 10 L 20 0 Z" class="common-bg"/&gt;
        &lt;/pattern&gt;
      &lt;/defs&gt;
      &lt;rect x="0" y="0" width="100%" height="10" fill="url(#sawPattern)"/&gt;
    &lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How to prevent ½<code>px</code> SVG shift on iOS Safari and Android Browser? Is it a bug and I should report it to WebKit developers? Maybe there is a way to make browsers round to <code>px</code> the other elements on the page?</p>
  
  <p>I can solve this problem without preventing ½<code>px</code> shift:</p>
  
  <ul>
  <li>Remove non-integer height of <code>.block_content</code></li>
  <li>Make such layout in which half-pixel shift doesn't lead to while line</li>
  </ul>
  
  <p>But I wonder is there a way to prevent ½<code>px</code> shift because the solutions above are not always possible.</p>