Iphone X viewport switching from portrait to landscape causes top of page to be unclickable

Published

Issue with link at top of the page on iPhone X becomming unclickable after rotating from portrait to landscape. While in portrait mode click ‘Hide Toolbar’ then rotate to landscape. Using the following code I can’t seem to be able to click the ‘Close’ button. Is the top of the screen an unclickable area reserved for the address bar?

JSFiddle with code: https://jsfiddle.net/k673b48n/1/

Am I missing something in my code? Is this a bug of some kind?

<head>
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<style>
  .header { position: absolute; right: 5px; }
  .alert-me:before { content: "Close"; position: absolute; top: 2px; left: -47px; }
  .container{ position: absolute; top: 50px; }
</style>
<div class="header">
  <a href="#" onclick="alert('Ahhh General Kenobi')">
    <div class="alert-me">X</div>
  </a>
</div>
<div class="container">
Some lorem ipsum to make the page longer..
</div>

This seems to work fine:

portrait - works

Close at the top of the page is now non responsive:

landscape - not working

Source: Ios

Published
Categorised as css, ios, iphone, viewport

Answers

position:absolute removes element from the normal document flow. And the element is positioned relative to its nearest positioned element, if any; else, it is positioned relative to its initial container. MAYBE on Safari, it does not do. So you may use position:relative on <body> to make sure that it is inside the <body>. And you may also use a large number z-index to arrange the header at the top of the stacking context.

More info:

position-absolute

z-index

stacking-context


If you do not need to change the normal flow of the document, you may use display:flex; justify-content: flex-end; instead of absolute positioning to place the X element at the right most.

.d-flex {
  display:flex;
}
.justify-content-end {
 justify-content: flex-end;
}

.align-items-center {
   align-items: center;
}


.pr-5px {
  padding-right: 5px;
}
<header class="d-flex justify-content-end align-items-center pr-5px">
  <a href="#" onclick="alert('Ahhh General Kenobi')">
    <div class="alert-me">X</div>
  </a>
</header>


<div class="container">
Some lorem ipsum to make the page longer..
</div>

Isabelle Nicolas

Leave a Reply

Your email address will not be published. Required fields are marked *

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq