'Bug in Firefox for Android: small pages not zooming out 100%
I have this very simple W3C valid HTML that Firefox for Android refuses to render in 100% view:
<!DOCTYPE html>
<html lang="pt">
<head>
<title>Devastacao por lei</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h3>Nothing here</h3>
</body>
</html>
No matter how much I pinch out, Firefox still renders the horizontal scrollbar and allows me to move the text right and left (i.e., scroll the page horizontally). I can zoom in, but I cannot zoom out to the point that I cannot scroll left/right without moving the text/page.
I tried fiddling with the Accessibility settings without luck. Tried with about:config, but it shows nothing.
Chrome renders the page perfectly.
Is this a bug? Maybe this problem happens with my device only...?
EDIT: Bug reported here
Solution 1:[1]
This is definitely a bug in Firefox, and only happens when the height of the page is smaller than the device height, that is, when the full page fits in height, AND when "Scroll to hide toolbar" is ON in Settings - Customize.
To check this, just add lines after the <h3>Nothing here</h3> of the form test<br> one by one. You will see the same problem. Keep adding lines until, suddenly, the page does not fit anymore in height. Then the page finally fits in width if pinched out, and everything works just fine.
WORKAROUND:
Just add this line to your HTML:
<div style="height: 101vh;visibility: hidden;"></div>
or, better, adjust the height to your page.
Notice that this will make the scrollbar to appear, and that the page will scroll even if there is "nothing" in the bottom. Setting overflow:hidden; for body or html prevents the workaround from working.
Maybe someone can find a better workaround...?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 |