OBJECTIVE:
a div is
{ position:fixed; bottom:0% }
it has a genuine height and width; the z-index is the highest in the document
= so, it should always be visible!
ISSUE:
mobile browsers 'cut' the bottom end of the page when zooming out.
this also cuts my div! While zooming in or out, I can see how the bottom-border makes the div appear/disappear.
MY ANALYSIS:
it appears as though the body of the page has an overflow:hide and my fixed div is pushed outside the body area when zoomed out.
unfortunately, I am unable to modify the body (I only insert the div into an existing site and have no access to the code of the page)
I would appreciate any explanations/suggestions/ideas!
thank you.
UPDATE
I examined the viewport height, html document's height, and the visible amount of css-pixels when zoomed out completely:
1440 document.documentElement.clientHeight
1486 document.documentElement.offsetHeight
1566 window.innerHeight
thus, mobile devices seem to 'cut' the fixed-div, because it's OUTSIDE THE HTML !?!
UPDATE 2
I disabled the current
<meta name="viewport" content="width=device-width, initial-scale=1">(not a viable option for later) and noticed that even my dev-tools in chrome display the 'end' of the html/body. Everything further south is not visible; instead, I see a large empty whitespace.