Question

我遇到了一个特效影响iOS上的Safari的问题。

我正在构建一个具有固定位置标题的页面，该标题是视口的宽度。页面的内容是一系列图像（数量可变），应该向右滚动。用户滚动时标题应保留在原位。

在iOS Safari上，固定标题略大于视口，并且还以与其他内容不同的速度滚动。

我已将代码剪切到以下内容，但仍然无法解决如何解决此问题 - 以下代码在我测试过的所有其他浏览器中都能正常运行。（我的目标是IE8 +）

我已经举办了此问题的示例here.

感谢您的任何建议和帮助。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>test</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style>
html {
    font-size: 10px;
    height:100%;
    white-space: nowrap;
}
body {
    height:100%;
    padding:0;
    margin:0;
}
#dgs2 {
    height:75%;
    display:inline-block;
}
img{
    height: 100%;
}
#pad{
    height:6em;
    padding-bottom:1px;
}
#header{
    position:fixed;
    width:100%;
    height:6em;
    border-bottom:1px solid;
}
.menuRight{
    float:right;
}
</style>
</head>
<body>
    <div id="header">
        <div class="menuRight"><h2>Menu</h2></div>
        <h1>Testing scroll on iPhone</h1>
    </div>
    <div id="pad"></div>
    <div id="dgs2">
        <img src='img/red.png'/><img src='img/blue.png'/><img src='img/red.png'/><img src='img/blue.png'/><img src='img/red.png'/><img src='img/blue.png'/><img src='img/red.png'/><img src='img/blue.png'/>
    </div>
</body>
</html>

Answer 1

我知道这个问题在这一年已经有一年了，但问题仍然存在于iOS中，并且我遇到了与固定元素漂移完全相同的问题，这让我感到疯狂。答案很简单：只需用div.wrapper包装div #bgs2（或任何元素上有“white-space：nowrap”）（显然该类不重要），并将溢出设置为auto：

.wrapper {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

我还添加了webkit-overflow-scrolling，这有助于避免重绘。

未来的某个人肯定会发现这个奇怪的问题，所以希望它有所帮助。

Answer 2

如果你喜欢使用jQuery，那么你可以使用类似的东西：

$(window).ready(function() {
  var bodyWidth = $(window).width();
  $("#header").width(bodyWidth).css('width', bodyWidth);
});

我包含了属性宽度和css宽度，只是为了确保它适用于所有浏览器。此外，如果您将元标记更改为：

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

那也应该有所帮助。

更新1

抱歉，我没有正确读取标题的CSS样式。标题的样式应如下所示：

#header{
    position:fixed;
    top: 0; // Set these positioning attributes 
    left: 0; // to hold the header in the top left.
    width:100%;
    height:6em;
    border-bottom:1px solid;
}

更新2

再次，另一个CSS更新。我注意到你有如下代码：

html {
    font-size: 10px;
    height:100%;
    white-space: nowrap;
}
body {
    height:100%;
    padding:0;
    margin:0;
}
#dgs2 {
    height:75%;
    display:inline-block;
}

您需要将其更改为如下所示：

html {
    font-size: 10px;
    height:100%;
}
body {
    height:100%;
    padding:0;
    margin:0;
}
#dgs2 {
    height:75%;
    display:inline-block;
    white-space: nowrap;
}

如果您将white-space: nowrap;移至#dsg2 div，而不是将其分配给html，那么这应该是您的最终修复。另外，将以下内容添加到jQuery代码中以配合您已有的内容：

$(window).resize(function() {
  var bodyWidth = $(window).width();
  $("#header").width(bodyWidth).css('width', bodyWidth);
});

iOS Safari：100％宽度的固定位置标题比视口宽

2 个答案: