我有一个
元素,它的左和顶偏移量是在页面加载时从一个值数组中随机选择的。它大部分时间都可以正常工作,但有时如果您刷新页面,窗口会向下滚动一点点,暴露出下一节内容,并且所有内容都会被稍微向左推。这里是一些这种不希望发生行为的屏幕截图。这是刷新后窗口的样子:
另外需要注意的是,这在Edge和Firefox中完美运行,但只有Chrome会出现这种行为。似乎文本容器的偏移量会影响其余内容,如果您刷新并且文本向左随机移动到先前位置的左侧,所有内容都会向左移动,如果它向下移动并导致浏览器向下滚动,则只在刷新时发生此问题,而在首次访问时不会发生。
这是我的Javascript有问题还是我的部分容器或背景样式有问题?还是Chrome缓存CSS的方式有问题?我不知道我还能尝试什么,所以任何帮助都将不胜感激。
这是代码:
<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的方式有问题?我不知道我还能尝试什么,所以任何帮助都将不胜感激。
.section { width: 100vw; height: 100vh !important; z-index: 1; max-width: 100%; }
- Akbar Ali