在移动设备(Android、Chrome、全高清屏幕、纵向)上浏览以下代码时，lorem ipsum-text 及其标题(“主页”)在滚动时似乎略微“跳过”。更准确地说，文章元素似乎向右下角拉伸(stretch)了大约 10 像素。
我已阅读有关此问题的信息，并且似乎存在一个修复程序，您可以通过某种方式使用 Javascript 禁用硬件加速滚动(这似乎会导致此问题)。
问题:我可能只在这个元素中使用 HTML5 和 CSS3。
仅使用这两种语言就可以解决这个问题吗？
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="stylesheet.css">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="author" content="John Smith">
<meta name="description" content="A website.">
<meta name="robots" content="noindex">
</head>
<body>
<header>
<h1>Header H1</h1>
<h2>Header H2</h2>
</header>
<nav>
<ul>
<li><a href="/dir" class="nav-item" id="current-page">Home</a></li>
<li><a href="/dir/page1" class="nav-item">Page 1</a></li>
<li><a href="/dir/page2" class="nav-item">Page 2</a></li>
<li><a href="/dir/page3" class="nav-item">Page 3</a></li>
</ul>
</nav>
<article>
<h3>Home</h3>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elementum pulvinar ante, ac feugiat augue gravida eget. </p>
<p>Vestibulum a odio iaculis, sagittis arcu vitae, elementum orci. Quisque et pretium mauris. Vivamus auctor ultricies lacus at efficitur.</p>
<p>Nullam fermentum dui et ligula placerat faucibus. Curabitur ut libero nec erat finibus ornare. Suspendisse convallis imperdiet consequat. </p>
<p>Vestibulum a odio iaculis, sagittis arcu vitae, elementum orci. Quisque et pretium mauris. Vivamus auctor ultricies lacus at efficitur.</p>
<p>Nullam fermentum dui et ligula placerat faucibus. Curabitur ut libero nec erat finibus ornare. Suspendisse convallis imperdiet consequat. </p>
<p>Vestibulum a odio iaculis, sagittis arcu vitae, elementum orci. Quisque et pretium mauris. Vivamus auctor ultricies lacus at efficitur.</p>
<p>Nullam fermentum dui et ligula placerat faucibus. Curabitur ut libero nec erat finibus ornare. Suspendisse convallis imperdiet consequat. </p>
</section>
</article>
<footer>
© John Smith 2015 <br>
<small><em>Some small-emmed text.</em></small> <br>
</footer>
</body>
</html>
CSS:
html {
background-color:#fbffff;
padding-top:2vh;
padding-bottom:2vh;
}
body {
font-family:Merriweather, sans-serif;
overflow:auto;
text-align:center;
background-color:#E3DEC1;
margin:0 auto;
padding:.1vh 0 0;
}
header {
line-height:50%;
}
#current-page {
color:#451b16;
}
header h1,header h2 {
color:#B94629;
}
a,a:visited {
color:#47AFAF;
}
nav > ul > li > a:visited,.nav-item {
color:#FFF;
}
nav {
background-color:#B94629;
overflow:hidden;
text-align:center;
margin:0 auto;
}
nav ul {
margin:0 auto;
padding:0;
}
nav ul li {
display:inline;
}
nav > ul > li > a {
display:block;
line-height:50px;
text-decoration:none;
padding:0 24px;
}
nav > ul > li > a:hover {
color:#e89f65;
}
h3 {
padding-bottom:2vh;
text-align:justify;
border-bottom:1px grey solid;
display:block;
margin:5vh 6vh 0;
}
section {
padding:0 6vh 4vh;
}
footer {
background-color:#dfd9b9;
padding:1vh 0;
}
p {
font-size:12pt;
line-height:20pt;
letter-spacing:.1pt;
text-align:justify;
}
最佳答案
我自己找到了答案。这与手机的硬件加速无关。
在上面的样式表中，几乎每个元素都使用视口(viewport)高度来调整大小。当使用 Chrome 在手机上滚动时，视口(viewport)高度在滚动后会以某种方式发生变化，因此会改变任何使用 vh 样式的元素的大小。
我将每个 vh 更改为 vw，因为垂直滚动时视口(viewport)宽度不会改变。这解决了问题，现在在移动设备上浏览就像一个魅力。
作为预防措施，我禁用了水平滚动(overflow-x: hidden)所以 vw 永远不会在同一设备上改变。
关于html - CSS:在移动设备上，滚动时文章会跳过/跳跃/移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28587704/