CODEWITHSUNDEEP
ioscss
GeckoTang
GeckoTang

Reputation: 2785

iOS9 mobile safari landscape css bug with position: fixed;

I checked this bug with iOS9 mobile safari iPhone6sPlus.

I can't touch the fixed element when safari's tab is displayed in landscape mode. And I can touch it when the tab is hidden.

  1. Show my demo on iOS9 mobile safari landscape.
    • Reproduced successfully only with tab bar visible,
  2. Scroll down until the tab was hidden.
  3. Touch the fixed element.
  4. Scroll up until the tab was displayed.
  5. Maybe you can't touch the fixed element.

Do you know about this bug?

Please try to touch when the tab is displayed on my pen. http://s.codepen.io/geckotang/debug/yYZmoe

This is the screenshot when I can't touch the element.

landscape mode

And my friend recorded the bug on youtube

Plus this is my code.

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.fixed {
  display: block;
  position: fixed;
  top: 0px;
  right: 0px;
  width: 100px;
  height: 100px;
  display: block;
  width: 100px;
  height: 100px;
  background-color: tomato;
}
</style>
</head>
<body>
  <a href="javascript: void(0);" class="fixed">link</a>
  The quick brown fox jumps over the lazy dog.<br>
  The quick brown fox jumps over the lazy dog.<br>
  The quick brown fox jumps over the lazy dog.<br>
  The quick brown fox jumps over the lazy dog.<br>
  The quick brown fox jumps over the lazy dog.<br>
  The quick brown fox jumps over the lazy dog.<br>
  The quick brown fox jumps over the lazy dog.<br>
  ...
</body>
</html>

Upvotes: 9

Views: 2848

Answers (1)

Adam Roberts
Adam Roberts

Reputation: 66

I am running iOS 9.3.1 on an iPhone 6S Plus and am seeing this problem also. After experimenting with numerous code workarounds I cannot resolve this or find a workaround. As stated above, it only occurs when the tab bar visible on the browser, as soon as you scroll down the page and the tab bar disappears, the rendering works as expected. When you scroll back up to the top of the page, the touch area is offset down by the amount of the page you had previously scrolled down to.

To note, this does not affect the visible rendering of the screen element in a fixed position, only the touch area associated with it.

Upvotes: 2

Related Questions