4

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

Tikeb
  • 978
  • 3
  • 9
  • 25

2 Answers2

1

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>
mahan
  • 12,366
  • 5
  • 48
  • 83
0

I've tested this issue on iPhone 8 and Xs, Safari browser. Did exactly what you described. While in portrait mode I clicked on 'Hide Toolbar' then rotate to landscape.

iPhone 8: First time was exactly like you described, although when I get back to the portrait mode - alert didn't work either. But! After reloading the page - i couldn't repeat the issue. Everything began to work just fine. After hiding toolbar and changing orientation - i'm clicking on Close, full toolbar appears and the alert works fine. I'have tried different combination, reloaded the page, app, reopened tab - works fine.

iPhone Xs: Exactly like you described. The issue can be repeated every time i reloaded page. Sometimes Close button not responding even after I rotate phone back to portrait mode. Sometimes on the 3-4 time of clicking the alert appears like it should be.

Summary

  1. This is definitely a Safari + iPhone X(s) bug, although can be detected on other models of iPhone.
  2. This problem isn't associated with Close button on the top edge of the screen, it is definitely an Alert window problem. You can use some tips howto replace standard alert.
focus.style
  • 6,612
  • 4
  • 26
  • 38