CSS 移动设备上的背景全屏跳动

Question

我正在开发一个网络应用程序，它有一个响应式（视差）全屏背景，可以根据屏幕高度和宽度进行调整。问题是，在移动设备上，背景“结束”在工具栏上方。如果我使用 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;
}

What I'm trying to achieve

Answer 1

在移动设备上，当工具栏可见时，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.

CSS 移动设备上的背景全屏跳动

CSS Background Full Screen on Mobile is jumpy

css

mobile