我遇到了一个特效影响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>
答案 0 :(得分:7)
我知道这个问题在这一年已经有一年了,但问题仍然存在于iOS中,并且我遇到了与固定元素漂移完全相同的问题,这让我感到疯狂。答案很简单:只需用div.wrapper包装div #bgs2(或任何元素上有“white-space:nowrap”)(显然该类不重要),并将溢出设置为auto:
.wrapper {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
我还添加了webkit-overflow-scrolling,这有助于避免重绘。
未来的某个人肯定会发现这个奇怪的问题,所以希望它有所帮助。
答案 1 :(得分:0)
如果你喜欢使用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);
});