CSS：在移动设备上，滚动时文章 skips/jumps/moves

Question

在移动设备（Android、Chrome、全高清屏幕、纵向）上浏览以下代码时，lorem ipsum-text 及其标题 ("Home") 似乎滚动时略微 'skip'。更准确地说，文章元素似乎向右下角拉伸了大约 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;
}

Answer 1

我自己找到了答案。这与 phone.

的硬件加速无关

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

样式的任何元素的大小

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

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

CSS：在移动设备上，滚动时文章 skips/jumps/moves

CSS: On mobile, article skips/jumps/moves when scrolling

html

css

mobile

scroll

horizontal-scrolling