Set height of darkmode-background and darkmode-layer--simple to 150% #102
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This allows mobile browsers to render the page nicely when the browser changes the viewport size while drag-scrolling
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.