iOS Safari：100％宽度固定位置标题比视口宽 [英] iOS Safari: 100% width fixed position header wider than viewport
问题描述
我遇到了一个问题，特别是Safari上的iOS。
我正在建立一个页面，它有一个固定的位置标题，是视口的宽度。页面的内容是一系列应该向右滚动的图像（数量可变）。用户滚动时，标题应保持在原位。
在iOS Safari上，固定标题比视口稍大，并且以不同于其他内容的速度滚动。
我已将代码缩减为以下代码，但仍然无法解决此问题 - 以下代码在我已测试的所有其他浏览器中都能正常工作。 （我的目标是IE8 +）
我已经承载了这个问题的例子这里。
感谢任何建议和帮助。
code><！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 Transitional // ENhttp://www.w3.org/TR/html4/loose.dtd\">
< html xmlns =http://www.w3.org/1999/xhtmlxml：lang =enlang =en>
< head>
< title> test< / title>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8>
< meta name =viewportcontent =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>菜单< / h2>< / div>
< h1>测试在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>
我知道这个问题是这个年龄，但问题仍然存在于iOS和我有EXACT同样的问题，固定元素漂移，它是驱动我坚果。答案很简单：只需用div.wrapper（该类显然不重要）包装div＃bgs2（或任何元素有white-space：nowrap），并将溢出设置为auto：
.wrapper {
overflow：auto;
-webkit-overflow-scrolling：touch;
}
我还添加了webkit溢出滚动，这有助于避免重画。 / p>
未来的人肯定会发现这个奇怪的问题，所以希望它有帮助。
I have run in to a problem that effects specifically Safari on iOS.
I am building a page which has a fixed position header that is the width of the viewport. The content of the page is a series of images (variable in number) which should scroll to the right. The header should remain in place when the user scrolls.
On iOS Safari, the fixed header, is slightly larger than the viewport, and also scrolls at a different speed than the rest of the content.
I've cut the code down to the following, and still cannot work out how to solve this problem - the following code works perfectly in all other browsers that I have tested. (I am targeting IE8+)
I've hosted the example of this problem here.
Thanks for any advice and help.
<!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>
I know this question is a year old at this point, but the issue still exists in iOS and I had the EXACT same issue with fixed elements drifting, and it was driving me nuts. The answer is pretty simple: Just wrap the div #bgs2 (or whatever element has "white-space:nowrap" on it) with div.wrapper (the class is unimportant obviously), and set the overflow to auto:
.wrapper {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
I also added webkit-overflow-scrolling, which helps with avoiding repaints.
Someone in the future is bound to find this bizarre issue, so hopefully it helps.
这篇关于iOS Safari：100％宽度固定位置标题比视口宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
