title: iPhone (Safari and Chrome both) position: fixed bug?
body: <p>I have this website </p>
  
  <p>On desktop everything works fine, but on iPhone (Safari and Chrome both) I have problem with preloader: </p>
  
  <p><a href="https://i.stack.imgur.com/Wf8oH.png" rel="nofollow noreferrer">Bug screenshot</a></p>
  
  <p>CSS:</p>
  
  <pre><code>    .preloader_wrapper {
          position: fixed;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          background: #000;
          z-index: 100500;
      }
      .preloader {
          position: relative;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 50%;
          width: 50px;
          height: 50px;
      }
      .preloader::before {
          content: '';
          position: absolute;
          box-sizing: border-box;
          top: 0;
          left: 0;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          border: 4px solid #951b25;
          border-left-color: transparent;
          border-right-color: transparent;
          animation: spin 1s linear infinite; 
      }
      @keyframes spin {
          0% {
              transform: rotate(0deg) scale(1);
          }
          50% {
              transform: rotate(45deg) scale(1.2);
          }
          100% {
              transform: rotate(360deg) scale(1);
          }
      }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>   &lt;div class="preloader_wrapper"&gt;
          &lt;div class="preloader"&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Due to my googling I think the problem is in position fixed. How to solve it?</p>