title: iOS not showing element on right: 0/float: right
body: <p>I'm having a very strange issue with my burger nav icon on iOS devices. On everything other than iOS devices, the menu link appears to be fine, but on IOS devices, the menu link is either completely off the screen to the right, or half off/half on the screen.</p>
  
  <p>I've tried positioning the menu link with <code>float: right</code> and <code>position: absolute</code> <code>right: 0</code>, but I've had no luck!</p>
  
  <p>To add to the whole issue, when using BrowserStack to test the website, using a 'real iOS device' the issue doesn't appear to show. This is the same using Google Chrome's inspect element's mobile debugging thing, the issue doesn't show.</p>
  
  <p>I've seen the issue when using the latest iPad Mini, and an iPhone 6 using both the Chrome browser, and Safari.</p>
  
  <p><strong>How the website should appear:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/dzwCU.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dzwCU.jpg" alt="Working example"></a></p>
  
  <p>As you can see, the menu link at the top right of the screen is displaying correctly. On iOS devices, this menu link appears either half on/off the screen to the right, or completely off the screen to the right.</p>
  
  <p><strong>Here's how it appears on iOS devices:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/HrqPC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HrqPC.jpg" alt="Broken on iOS"></a></p>
  
  <p>Here's the CSS of the parent element:</p>
  
  <pre><code>.menu-bar {
      position: absolute;
      z-index: 5000;
      width: 100%;
  }
  </code></pre>
  
  <p>And here's the CSS regarding the actual element:</p>
  
  <pre><code>a.menu-link {
      font-family: "nicholsmedium";
      color: #fff;
      text-decoration: none;
      font-size: 40px;
      margin-top: 45px;
      float: right;
      z-index: 3;
      display: block;
  }
  </code></pre>
  
  <p>Also the relevant HTML:</p>
  
  <pre><code>&lt;body&gt;  
      &lt;div class="menu-bar"&gt;
          &lt;a class="menu-link" href="#"&gt;
              &lt;span class="open"&gt;A&lt;/span&gt;
              &lt;span class="close"&gt;D&lt;/span&gt;
          &lt;/a&gt;            
      &lt;/div&gt;
  </code></pre>