当在iOS中的Safari中出现选项卡栏时，旋转到横向时HTML元素消失_Html_Css_Safari_Viewport

当在iOS中的Safari中出现选项卡栏时，旋转到横向时HTML元素消失

html css safari

当在iOS中的Safari中出现选项卡栏时，旋转到横向时HTML元素消失,html,css,safari,viewport,Html,Css,Safari,Viewport,这是最奇怪的事情。这是源代码 <!doctype html> <html><head><meta charset="utf-8"><title>Kaely Michels-Gualtieri</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style&g

这是最奇怪的事情。这是源代码

<!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>


凯利·米歇尔·瓜蒂埃里
正文{margin:auto}
#图标{边距：自动；位置：固定；左侧：0px；底部：0px；右侧：0px；宽度：50%；高度：100px；背景：黑色}

我正在一台运行最新版本、9.3或其他版本的iOS设备上进行试验（没有什么特别之处），当我使用上面提供的源代码定位设备时，
栏消失了（如果Safari的选项卡栏控制器可见–即在后台打开选项卡）！如果没有其他选项卡，就没有问题与
位置有关的内容：固定的元素。我认为这与Safari的选项卡栏控制器与视口有关希望在这方面能得到一些帮助。谢谢嗨@zaydek你有没有试过看这篇文章嗨@zaydek你有没有试过看这篇文章似乎是一个已知的bug 找到了有关StackOverflow的简明解决方案（搜索词位置固定方向）。该漏洞似乎是WebKit特有的，因此仅限于iPhone 6/s Plus和Safari。Android设备和Chrome似乎不受影响将-webkit transform:translate3d（0,0,0）或-webkit transform:translateZ（0）附加到CSS声明中。比如说, #图标{…-webkit转换：translateZ（0）} 我不知道两者之间有什么区别，但是translateZ（0）更短。我还认为-webkit 是不必要的愿你得救似乎是一个已知的bug 找到了有关StackOverflow的简明解决方案（搜索词位置固定方向）。该漏洞似乎是WebKit特有的，因此仅限于iPhone 6/s Plus和Safari。Android设备和Chrome似乎不受影响将-webkit transform:translate3d（0,0,0）或-webkit transform:translateZ（0）附加到CSS声明中。比如说, #图标{…-webkit转换：translateZ（0）} 我不知道两者之间有什么区别，但是translateZ（0）更短。我还认为-webkit 是不必要的愿你得救谢谢！我找到了解决办法！：汉克斯！我找到了解决办法！：D