<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="yes" name="apple-touch-fullscreen" />
<meta content="telephone=no,email=no" name="format-detection" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<script>
(function(g,h){function f(){var a;a=b.getBoundingClientRect().width;540<a/c&&(a=540*c);b.style.fontSize=a/10+"px";g._rem=a/10}var b,a,c,d,e,k;b=document.documentElement;a=h.getElementById("view");k=window.navigator.userAgent;a||(a=h.createElement("meta"));c=window.devicePixelRatio;d=parseFloat(1/c).toFixed(2);k.match("iPhone")?(a.setAttribute("name","viewport"),a.setAttribute("content","width=device-width,initial-scale="+d+", maximum-scale="+d+", minimum-scale="+d+", user-scalable=no"),b.setAttribute("dpi",c)):(a.setAttribute("name","viewport"),a.setAttribute("content","width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"),b.setAttribute("dpi",1));b.firstChild.appendChild(a);g.addEventListener("pageshow",function(){clearTimeout(e);e=setTimeout(function(){f()},300)},!1);g.addEventListener("resize",function(){clearTimeout(e);e=setTimeout(function(){f()},300)},!1);f()})(window,document);
</script>
<title>ios position:fixed bug</title>
<style type="text/css">
* {
box-sizing: border-box;
margin: 0;
font-family: monospace;
}
textarea {
height: 220px;
font-size: 16px;
line-height: 40px;
margin: 0;
background: rgba(0,255,0,1);
display: block;
width: 100%;
color: #fff;
font-weight: bold;
padding: 2px 10px;
z-index: 1;
position: fixed;
top: 0;
}
body,html {
height: 100%;
overflow: hidden;
}
#body {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
</style>
</head>
<body>
<div id="body">
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
<p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
</div>
<textarea id="scroll" placeholder="tap to focus" ></textarea>
</body>
</html>
参考链接:
https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios