11

In order to fill the whole height of the page, I use height: 100%; for html and body tags, and it works fine until a browser would be closed and reopened. (I don't use 100vh because of issues on mobile devices https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html )

Steps to reproduce:

the page will be fixed by itself in these cases:

  • update page
  • rotate the device to landscape
  • open and close browser's navigation by tabs
  • close and reopen browser without closing it in multitasking nav

Why does it happen? How can I fix this behavior?

Thank you in advance!

picciano
  • 22,341
  • 9
  • 69
  • 82
Anzhelika
  • 111
  • 1
  • 5
  • more information is needed here. Can you post a code sample? The rest of the css / html markup could be contributing to the issues, not just the height and the platform – Rachel Gallen Nov 24 '19 at 10:07
  • Curious - in your example, you can change `.links` div to `position: absolute`. Does this change the behaviour you're seeing? (I don't have iphone to test) – slynagh Nov 25 '19 at 21:01
  • [Here](https://jsfiddle.net/b1w3ktdu/6/) is your code example @Rachel Gallen. – Aaron3219 Nov 28 '19 at 18:27
  • Also, try to rotate your phone to landscape mode and back again. It will be fixed. I think this is an issue with Chrome and not the HTML/CSS. It only appears in Chrome and the amount you have to scroll down is the exact amount of pixels the bottom and top bar of the Chrome browser result in if you combine them. – Aaron3219 Nov 28 '19 at 18:29
  • @slynagh no it does not. – Aaron3219 Nov 28 '19 at 18:31
  • @Anzhelika the links are `position: fixed`, which should fix them to the viewport. Thus it seems the viewport height is not calculated as you expect, and probably is the exact same issue with using vh. Remove the `.main` div completely. Does the issue remain? If so you will have a hard time fixing, if not it would indicate that `.main` is forcing the height out. – slynagh Dec 02 '19 at 09:39

2 Answers2

4

I had a very different issue, but I think the solution I worked out may work for your situation also, because you mentioned updating the page would fix it.

So I had issues with chrome on android where if you scroll very quickly (not uncommon on mobile), some elements would fail to get re/painted. Searched everywhere for a solution but couldn't find anything that would work.

Finally, I figured out a working fix:

.pagewrap {
  transform: translateZ(0);
  animation-name: 'repaint';
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-play-state: running;
  animation-timing-function: linear;
}

@keyframes repaint {from { zoom: 99.99999%; } to { zoom: 99.99998%; }}

So what this does is forces the page to continually repaint on a 3 second cycle.

Maybe I should tweak it to only shift for a fraction of a second every 2 seconds, instead of continually:

.pagewrap {
  transform: translateZ(0);
  animation-name: 'repaint';
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-play-state: running;
  animation-timing-function: linear;
}

@keyframes repaint {
  0% {
    zoom: 99.99999%;
  }
  99% {
    zoom: 99.99999%;
  }
  100% {
    zoom: 99.99998%;
  }
}

I tried zoom: 99.99999; to 1 but certain elements that transitioned scale above 1 on some hover effects would show the zoom breathing. So 99.99999 to 99.99998 was what worked for me to make the effect invisible.

Slightly hacky solution that could present performance issues for very long pages, but maybe not, because the browser should only be rendering what's onscreen. The pages I used this on are graphically heavy with a lot of complex multi-layer effects, and this doesn't seem to have a noticeable performance impact.

Seems like many mobile browsers have excessively optimized rendering, which leads to quirky failures with few well documented fixes. Forcing repaints was the only working fix I found.

I tried other, slightly less aggressive, documented methods of forcing repaints. Like adding some text to the page (invisibly) after scrolling stops for 200ms, and such. Nothing worked though, thus my animate-the-entire-page-forever hack.

In your case, some of those other hacks may work better. This article outline all the various things that cause repaints/reflows so you could try doing some of these things via script.

Veneseme Tyras
  • 596
  • 3
  • 9
  • That didn't help in my case. Conversely, elements started to act unpredictable. One element that was 'fixed', stuck to page and became scrollable alongside with a whole page. – Max S Aug 05 '21 at 07:17
0

Light way to fix an issue:
Firstly, a tiny js-code*:

function defineVisibleHeight (){
      const h = window.innerHeight * 0.01;
      document. documentElement.style.setProperty('--vh', `${h}px`);
 }

 defineVisibleHeight();
 
 window. onresize = defineVisibleHeight; // not mandatory;

*code sample has extra whitespaces to prevent plain copy/paste

With a previous code we found out a true visible area of a screen and stored it as variable for stylesheet;
Finally, css:

.wrapper{
    height: calc(var(--vh, 1vh) * 100);
}
Max S
  • 109
  • 1
  • 4