1

The answer found on Viewport height problem when browser goes fullscreen does NOT solve this issue.

No problems ever seen on desktop. But both on tablet and on phone, although more than half of the time everything is displayed correctly, sometimes -unpredictably- the problematic process starts and goes as follows; first let's say we have a page like this,

step one

and then when the "go fullscreen" button is tapped the address bar is removed and I see this for an instant,

step two

and then the div just stays above where it is supposed to be sitting,

step three

At this stage touching the screen or making a random swipe gesture corrects the position of the div. The impression is like some kind of REDRAW function is triggered by that.

step four

It looks like the order of events within the browser, when switching to fullscreen, is not always the same and when that final REDRAW gets late for a few milliseconds this problem occurs. If I knew a method to force the browser to redraw everything in the DOM maybe I could fix this. Any suggestions?

HolyResistance
  • 594
  • 1
  • 8
  • 26

1 Answers1

1

As an improvised solution I have tried giving the div an unnoticable nudge hoping that it would be something like a forced screen refresh,

window.addEventListener("resize", myDivShakingFunction);
function myDivShakingFunction()
{
  setTimeout(function()
  { document.getElementById("theIdOfTheDivWithThisProblem").style.bottom = "-1px";  },100);

  // the durations may be adjusted for fine tuning through trial and error if necessary

  setTimeout(function()
  { document.getElementById("theIdOfTheDivWithThisProblem").style.bottom = "0px";  },200);
}

It seems to be working! Though I haven't tried it enough many times to be 100% certain.

HolyResistance
  • 594
  • 1
  • 8
  • 26