This allows mobile browsers to render the page nicely when the browser changes the viewable page size while drag-scrolling
Description of the issue
Some mobile browsers, at least Chromium-based browser in Android devices have a viewport set to a height that excludes the nav row at the top and browser button row at the bottom. When dragging and scrolling down on a long page, these browser UI elements smoothly scroll away from view but the viewport size stays the same while the user keeps pressing on the screen.
This makes Darkmode.js look a bit funny since the viewport size stays the same (100%) but the browser reveals content outside of this range. Result is the bottom part of the page is not handled by Darkmode.js CSS blend trick.
Proposed fix
Just setting the height in darkmode-background and darkmode-layer--simple CSS classes to 150% should extend the size enough for this effect to disappear.
This allows mobile browsers to render the page nicely when the browser changes the viewable page size while drag-scrolling
Description of the issue
Some mobile browsers, at least Chromium-based browser in Android devices have a viewport set to a height that excludes the nav row at the top and browser button row at the bottom. When dragging and scrolling down on a long page, these browser UI elements smoothly scroll away from view but the viewport size stays the same while the user keeps pressing on the screen. This makes Darkmode.js look a bit funny since the viewport size stays the same (100%) but the browser reveals content outside of this range. Result is the bottom part of the page is not handled by Darkmode.js CSS blend trick.
Proposed fix
Just setting the height in
darkmode-backgroundanddarkmode-layer--simpleCSS classes to 150% should extend the size enough for this effect to disappear.