fix: Android demo app fills viewport #275
Merged
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
Ensure the editor HTML expands to fill the viewport height. Set explicit `layoutParams` with MATCH_PARENT on `GutenbergView` when used inside Compose's `AndroidView`. This fixes CSS viewport units (`vh`, `vw`, `dvh`) calculating as zero. When a WebView is embedded in `AndroidView` without explicit `layoutParams`, the WebView's initial size is calculated as zero during the first composition pass. This causes CSS viewport units to resolve to 0px, even though JavaScript APIs like `window.innerHeight` return correct values. Setting `MATCH_PARENT` `layoutParams` ensures the WebView knows its intended size constraints before loading content, allowing CSS viewport calculations to work correctly. This is a known issue with WebView in Jetpack Compose: - https://issuetracker.google.com/issues/238245846 - google/accompanist#1224
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
What?
Ensure the editor HTML expands to fill the viewport height.
Why?
The editor background is clipped if the root element does not expand to fill the entire height.
How?
Set explicit
layoutParamswith MATCH_PARENT onGutenbergViewwhen used inside Compose'sAndroidView. This fixes CSS viewport units (vh,vw,dvh) calculating as zero.When a WebView is embedded in
AndroidViewwithout explicitlayoutParams, the WebView's initial size is calculated as zero during the first composition pass. This causes CSS viewport units to resolve to 0px, even though JavaScript APIs likewindow.innerHeightreturn correct values.Setting
MATCH_PARENTlayoutParamsensures the WebView knows its intended size constraints before loading content, allowing CSS viewport calculations to work correctly.This is a known issue with WebView in Jetpack Compose:
Testing Instructions
This is particularly notable if a theme's styles are applied to the editor via #260.
Example background clipping
To verify the fix manually, rely upon the Chrome DevTools to inspect the element height:
htmlelement does not have a height of0, but fills the entire viewport.Accessibility Testing Instructions
N/A, no navigation changes.
Screenshots or screencast