Hello I have a website at: https://nusstudios.com
If you look at the Blog from a mobile device (eg.: iOS) and you scroll up and down you will detect a well known stuttering due to change in viewport size. That is because of the following settings of my background div element:
background-image: url("../images/leder.jpg");
background-position: center;
background-size: cover;
z-index: -1;
position: fixed;
top: auto;
height: 100vh;
left: 0;
right: 0;
bottom: 0;
It was intended to cover the whole viewport but on mobile devices the size of viewport changes dynamically and so when it gets larger the top of the rendered image gets extended which does not happen immediately so it results in a very buggy looking experience. I was already considering a completely new design which does not require such a background but maybe there's workaround? I've heard it could be solved by applying some transition to height or image-size property but it did not seem to work:
transition: height 0.5s linear;
Also I fix I'm aware of is the prevention of the hiding of the address and menu bar, and it is a very widely applied solution but it takes away valuable screen space on small devices. Can we do better?
