fix: Android ignores centering and inset-stretch on containers with absolute children - #376
Open
SRWieZ wants to merge 1 commit into
Open
Conversation
… alignment on Android Two Android gaps against the iOS FlexContainer, both visible on any screen using relative/absolute composition: 1. An absolute child with both opposing insets set (inset-0, inset-x-0) must stretch between them — iOS proposes the stretched size in placeAbsolute. Android only anchored to a corner, so 'absolute inset-x-0 justify-center' collapsed to content width and hugged the left edge, and childless full-bleed rects (inset-0 overlays/scrims) measured zero. Absolute children are now measured and placed by a small custom Layout against the container's real bounds (matchParentSize), with stretched axes measured tight — and they no longer influence the container's size (iOS parity). 2. The flow content of a container that also has absolute children was pinned to the Box's top-start corner, so items-center/justify-center silently did nothing on externally-sized containers. The Box now derives its contentAlignment from the container's own justify/align.
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
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's wrong
Two Android layout bugs, visible on any screen that layers absolute children over content. iOS renders the same Blade correctly.
absolutechildren with two opposing insets don't stretch. In CSS (and in the iOS renderer),inset-x-0stretches a child to full width andinset-0makes it fill the container. Android only anchored the child to a corner — soabsolute inset-x-0 justify-centercollapsed to content size and hugged the left edge, and a childlessabsolute inset-0overlay (the classic scrim) measured zero and was invisible.items-center justify-centerstops working once the container has an absolute child. The flow content gets pinned to the top-left corner.Minimum repro (generic — paste into any screen):
What this does
Layoutagainst the container's real bounds: one edge set anchors to it, both opposing edges stretch the child between them (stretched axes measure tight, so the child's ownjustify-*works inside), negatives still overhang. Mirrors iOSplaceAbsoluteone-for-one.Before / after (Android emulator, API 36, same Blade)
iOS reference (unchanged, both fixes match it):