zaydek zaydek - 3 months ago 51
CSS Question

HTML element disappears when rotating to landscape in Safari in iOS when tab bar present

This is the weirdest thing. Here's the source code.

<!doctype html>
<html><head><meta charset="utf-8"><title>Kaely Michels-Gualtieri</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

body { margin: auto }
#icons { margin: auto; position: fixed; left: 0px; bottom: 0px; right: 0px; width: 50%; height: 100px; background: black }

</style></head>

<body>

<span id="icons">
<a href="/"></a>
</span>

</body></html>


I'm experimenting on an iOS device running the latest, 9.3 or whatever (nothing special), and when I orient the device with the source code provided above, the
<span>
bar disappears
(if Safari's tab bar controller is visible – AKA open tabs in the background)! If there's no other tabs, there's no problem. Something to do with
position: fixed
elements.


I think it has to do with the Safari's tab bar controller screwing with the viewport.

Would love some help on this one. Thanks!

Answer

Appears to be a known bug...

bugs.webkit.org/show_bug.cgi?id=153056

Found a concise solution on StackOverflow (search terms position fixed orientation). The bug appears to be WebKit specific, thus its limited to iPhone 6/s Plus and Safari. Android devices and Chrome appear to be unaffected!

Append -webkit-transform: translate3d(0, 0, 0) or -webkit-transform: translateZ(0) to the CSS declaration. For example,

#icons { ... ; -webkit-transform: translateZ(0) }

I don't know that there's a difference between the two but translateZ(0) is shorter. I also expect -webkit to be unneeded.

May you be saved!

Comments