title: SVG icons don't always appear on Iphone 4
body: <p>I'm having a weird problem with a website I made. I used many SVG icons in the project to increase front-end performance.</p>
  
  <p>The problem I have is that some of my icons only show on Iphone 4 when I refresh the page about 3-4 times. When I go to another destination on the page, the problem appears again, and I can't see some of the icons. The icons that is buggy is some that is used in a modal and a slidedown div to reveal some extra features. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;svg class="login-arrow"&gt;
      &lt;use xlink:href="img/svg-system.svg#login-arrow"&gt;&lt;/use&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.login-arrow {
      width: rem(22);
      height: rem(21);
      position: absolute;
      z-index: -2;
      top: 50%;
      left: 50%;
      margin-right: -50%;
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      fill: $white2;
  }
  </code></pre>
  
  <p>SVG code:</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;symbol id="login-arrow" viewBox="0 0 32.3 31"&gt;
          &lt;title&gt;Login ikon&lt;/title&gt; 
          &lt;desc&gt;Pil der peger til højre og skal illustrerer at man logger ind på JustHome boligportal ved at klikke på pilen.&lt;/desc&gt;
          &lt;path d="M19,10.8l5,4l-1.2,1.6l-5-4L19,10.8z" /&gt;
          &lt;path d="M15.4,20.6h-15v-10h15v2h-13v6h13V20.6z" /&gt;
          &lt;path d="M13.4,30.7v-8.1h2v3.9l13.4-10.9L15.4,4.7v3.9h-2V0.5L32,15.6L13.4,30.7z" /&gt;
  &lt;/symbol&gt;
  &lt;/svg&gt;
  </code></pre>