用Chrome重新加载页面时，内容会稍微移动

Question

我有一个

元素，它的左和顶偏移量是在页面加载时从一个值数组中随机选择的。它大部分时间都可以正常工作，但有时如果您刷新页面，窗口会向下滚动一点点，暴露出下一节内容，并且所有内容都会被稍微向左推。这里是一些这种不希望发生行为的屏幕截图。这是刷新后窗口的样子：

这是代码:

<div class="about-section section">

    <div class="about-section__container">
        <h2 class="section-header about-section__header">About me.</h2>

        <p class="about-section__paragraph"></p>
    </div>
...
</div>

.section {
    width: 100vw;
    height: 100vh;
    z-index: 1;
}

.about-section {
    background-image: url("../../../mountain-background.png.jpg");
    background-size: cover;
}

.about-section__container {
    position: absolute;
    display: block;
    visibility: hidden;
    left: 0;
    top: 0;
}

.about-section__header {
    color: white;
    font-size: 3.5em;
    font-family: 'Abril Fatface';
}

var title = $('.about-section__container');

var xIndex = Math.floor(Math.random() * 4);
var yIndex = Math.floor(Math.random() * 4);

var leftMargs = ['20%', '25%', '30%', '35%'];
var topMargs = ['25%', '30%', '35%', '40%'];

title.css({
    'left': leftMargs[xIndex],
    'top': topMargs[yIndex],
    'visibility': 'visible'
    });

另外需要注意的是，这在Edge和Firefox中完美运行，但只有Chrome会出现这种行为。似乎文本容器的偏移量会影响其余内容，如果您刷新并且文本向左随机移动到先前位置的左侧，所有内容都会向左移动，如果它向下移动并导致浏览器向下滚动，则只在刷新时发生此问题，而在首次访问时不会发生。

这是我的Javascript有问题还是我的部分容器或背景样式有问题？还是Chrome缓存CSS的方式有问题？我不知道我还能尝试什么，所以任何帮助都将不胜感激。

- jkofskie

---

缓存可能是问题所在。尝试清除您的 Chrome 缓存。 - hans-könig

请问您能否创建一个带有问题的JS Fiddle？ - Akbar Ali

@hans-könig 我尝试了很多次。 - jkofskie

我已经在section的高度上添加了!important，现在这个问题对我来说不存在了。你能否请检查一下它是否在你那边工作？ .section { width: 100vw; height: 100vh !important; z-index: 1; max-width: 100%; } - Akbar Ali

@AkbarAli 运行得很顺利，谢谢。我仍然希望能够理解为什么只有 Chrome 会引起这个问题。如果你把这个评论作为答案发布，我可以标记它 :) - jkofskie

Answer 1

在你的 CSS 中添加这个

.section { 
    width: 100vw; 
    height: 100vh !important; 
    z-index: 1; 
    max-width: 100%; 
}

或者您可以添加overflow-anchor: none;，这也可以正常工作。我只是在此链接中找到了相同的问题：Chrome浏览器自动滚动

- Akbar Ali