CSS：在移动设备上，滚动时文章会跳过/跳转/移动答案

【问题标题】：CSS: On mobile, article skips/jumps/moves when scrollingCSS：在移动设备上，滚动时文章会跳过/跳转/移动
【发布时间】：2015-02-18 15:47:00
【问题描述】：

在移动设备（Android、Chrome、全高清屏幕、纵向）上浏览以下代码时，lorem ipsum-text 及其标题（“主页”）在滚动时似乎会略微“跳过”。更准确地说，文章元素似乎被拉伸到了右下角，大约 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>
        &copy; 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;
}

【问题讨论】：

我想你想要硬件加速滚动。这些东西应该意味着有 no 跳转。所以尝试添加transform: translate3d(0,0,0) 以在有问题的元素上启用它。
唉，这并不能解决问题。

标签： html css mobile scroll horizontal-scrolling

【解决方案1】：

我自己找到了答案。这与手机的硬件加速无关。

在上面的样式表中，几乎每个元素都使用视口高度来调整大小。使用 Chrome 在手机上滚动时，视口高度在滚动后会发生某种变化，因此会更改任何带有 vh 样式的元素的大小。

我将每个vh 更改为vw，因为垂直滚动时视口宽度不会改变。这解决了这个问题，现在在移动设备上浏览就像一个魅力。

作为预防措施，我禁用了水平滚动 (overflow-x: hidden)，因此 vw 永远不会在同一设备上更改。

【讨论】：