我正在开发一个网络应用程序，它有一个响应式(视差(全屏背景，可以调整屏幕的高度和宽度。问题是，在MOBILE上；结束"；工具栏上方。如果我使用Firefox向下滚动(稍后再向上滚动(，我会对背景下的内容产生跳跃效果，因为它正在根据工具栏进行调整。我知道这是一个众所周知的问题，但我仍然找不到适合我的解决方案。我在下面添加了一张我正在努力实现的目标的截图。
我目前有以下几种：
.page-header-image {
filter: blur(4px);
background-image: url("../../../assets/images/party-blue-kite.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: calc(100vh - calc(100vh - 100%));
width: 100%;
position: fixed; // -> jumpy effect -> nullified through height transitition
// position: absolute; -> laggy on scroll
z-index: -1;
transform: scale(1.5);
transition: height 999999s;
}
我正在努力实现
在移动设备上，当工具栏可见时，100vh值确实发生了更改，这导致了背景图像的跳跃效果。在body元件上应用具有before的背景图像减少了这种影响。
body {
font-size: 3rem;
margin: 0;
position: relative;
}
body::before {
background-image: url('https://i.imgur.com/MrGY5EL.jpg');
background-position: center;
background-size: cover;
content: '';
display: block;
height: 100vh;
position: fixed;
width: 100%;
z-index: -1;
}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce accumsan quis ex eu pharetra. Curabitur ullamcorper nisl purus, quis rhoncus ipsum gravida efficitur. Integer sed massa orci. Aliquam et lorem quam. Morbi efficitur purus sit amet ex pulvinar, quis pharetra mauris aliquam. Duis in nunc mattis, fringilla nisl eu, placerat ligula. Etiam ut pellentesque arcu. Nulla facilisi. Vestibulum ac mauris ornare, malesuada odio sed, pharetra dolor. Donec eu elit nisl. Vestibulum purus felis, aliquam quis ultricies vel, pretium at enim. Pellentesque feugiat pulvinar sagittis. Praesent nec arcu nec mauris posuere ultrices nec in eros. Mauris dignissim turpis et dolor aliquet, id tempus elit porta. Nunc convallis aliquam mollis. Mauris nunc nulla, molestie et ultrices a, scelerisque et massa. Duis et diam nec urna rutrum feugiat eu id purus. Morbi convallis elit turpis, quis eleifend nulla viverra eu. Pellentesque vel gravida lacus, eget sodales dui. Vestibulum ullamcorper vesti sit amet nibh. Fusce ac massa felis. Nullam placerat tellus enim, vel congue libero bibendum ullamcorper. Aliquam sollicitudin non massa vel interdum. Vestibulum sit amet nunc condimentum, porttitor purus at, ultrices felis. Duis ultrices accumsan ligula id vestibulum. Donec massa justo, lacinia nec euismod sit amet, euismod non ex. Integer posuere euismod sapien vel convallis. Ut auctor, odio in cursus accumsan, enim magna vulputate dui, ut auctor enim tortor a nibh. Nulla commodo, ex eu placerat pulvinar, mi mi iaculis arcu, a facilisis lectus orci ornare lacus. Donec eget odio venenatis, aliquet augue vel, sagittis dolor. Quisque non dolor nec ipsum lobortis dignissim eget non ebulum nulla. Integer gravida posuere mi, sed pellentesque leo elementum ut. Mauris pharetra neque a commodo congue. Mauris consequat justo lacinia, lobortis mi vel, venenatis turpis. In hac habitasse platea dictumst. Nullam venenatis velit vel pharetra accumsan. Curabitur euismod semper molestie. Etiam blandit, mi lacinia commodo vulputate, leo velit consequat mi, a eleifend magna enimnim. Nunc in rhoncus ligula. Suspendisse consequat ac sem id pharetra. Nulla porta, tortor in rutrum ornare, dui magna consectetur ipsum, in tincidunt urna enim nec dui. Integer laoreet felis sem, at sagittis ipsum ullamcorper vel. Nullam mattis felis eget ipsum dignissim, sed lacinia nisi pellentesque. Sed sodales purus et nisi pretium, eu aliquet leo sagittis. Morbi pharetra, felis non semper ullamcorper, ante mauris condimentum sapien, a ultrices est turpis vel nisl. Curabitur lacus urna, tristique ac pretium a, vestibulum eu libero. Mauris tincidunt tellus ac vulputate tincidunt. Sed ultricies orci mattis diam lacinia sodales. Sed nec felis auctor, bibendum elit et, sodales dui.