CODEWITHSUNDEEP
cssmobile
steasy
steasy

Reputation: 33

CSS Background Full Screen on Mobile is jumpy

I'm developing a web app and have a responsive (parallax) full screen background, that is adjusting on screen height and width. Problem is, that on MOBILE the background "ends" above the toolbar. If I'm scrolling down (and later up) with Firefox, I'm getting a jumpy effect with the content that is below the background, because it's adjusting to the toolbar. I know that it is a well known problem, but I still can't find a fitting solution in my case. I added a screenshot below at what I'm trying to achieve.

I currently have the following:

.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

Upvotes: 1

Views: 87

Answers (1)

Kees Hak
Kees Hak

Reputation: 860

On mobile devices the 100vh value is indeed altered when the toolbar is visible what causes the jump effect of the background image. Applying a background image with a before on the body element reduces this effect.

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.

Upvotes: 1

Related Questions