title: Strange navbar effect when blurred on iOS
body: <p>I'm getting a very strange effect only on iOS devices (regardless of the browser) when I try to apply blur to my navbar.</p>
  <p>On safari on iOS:</p>
  <p><a href="https://i.stack.imgur.com/F1rin.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F1rin.jpg" alt="enter image description here" /></a></p>
  <p>On Chrome on iOS:</p>
  <p><a href="https://i.stack.imgur.com/EtBns.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EtBns.jpg" alt="enter image description here" /></a></p>
  <p>On Chrome on Android it looks fine:</p>
  <p><a href="https://i.stack.imgur.com/U2mbq.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U2mbq.jpg" alt="enter image description here" /></a></p>
  <p>On emulator it looks fine too:</p>
  <p><a href="https://i.stack.imgur.com/Vu3d8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vu3d8.jpg" alt="enter image description here" /></a></p>
  <p>The way I apply the blur to the navbar is as follows:</p>
  <pre><code>.navbar-item {
       -webkit-backdrop-filter: blur(8px);
       backdrop-filter: blur(8px)
  }
  </code></pre>