Login/Register
iPhone 6 Plus strange bugs in landscape mode with tabs and fixed elements
Asked Answered
ioscssiphonecss-positionmobile-safari
H

1

7

I'm having some crazy issues with iPhone 6+ Safari (iOS 9 mostly, though iOS 8 also has some minor glitches) with tabs mode on. All fixed elements are positioned correctly in portrait and landscape, but are not visible and/or shifted in landscape mode with one or more tabs open. Even though they're not visible, they're still clickable and overlap the rest of the content. Rotating device solves the issue to some extent, as well as switching between tabs. Setting element position from fixed to static and back also helps.

HTML:

<html>
  <head></head>
  <body>
    <div id="application">
      <div class="outer-header">
        <div class="inner-header">
          <a id="link-test" href="#">Click me!</a>
        </div>
      </div>
    </div>
  </body>
</html>

CSS:

body {
  background: linen;
}

.outer-header {
  position: fixed;
  width: 100%;
  height: 30px;
  top: 0;
  left: 0;
  background: steelblue;
}

.inner-header {
  background: white;
}

Application is quite big, but I've managed to reproduce this issue on codepen: iPhone 6 Plus position:fixed bug

Open it directly in landscape with tabs on.

Hsiuhsu answered 24/2, 2016 at 14:23 Comment(0)
T
0

If you add a style to your application element will work. Something like this:

document.querySelector('#link-test')
  .addEventListener('click', 
    function(e) {
      e.preventDefault();
      alert('You did it!');
    });
body {
  background: linen;
}

#application {
  position: relative;
}

.outer-header {
  position: fixed;
  width: 100%;
  height: 30px;
  top: 0;
  left: 0;
  background: steelblue;
}

.inner-header {
  background: white;
}
<html>
  <head></head>
  <body>
    <div id="application">
      <div class="outer-header">
        <div class="inner-header">
          <a id="link-test" href="#">Click me!</a>
        </div>
      </div>
    </div>
  </body>
</html>
Thaler answered 5/10, 2016 at 0:51 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.