Skip to content

fix: Android ignores centering and inset-stretch on containers with absolute children - #376

Open
SRWieZ wants to merge 1 commit into
NativePHP:mainfrom
SRWieZ:fix/android-absolute-insets-flow-alignment
Open

fix: Android ignores centering and inset-stretch on containers with absolute children#376
SRWieZ wants to merge 1 commit into
NativePHP:mainfrom
SRWieZ:fix/android-absolute-insets-flow-alignment

Conversation

@SRWieZ

@SRWieZ SRWieZ commented Aug 24, 2026

Copy link
Copy Markdown
Member

What's wrong

Two Android layout bugs, visible on any screen that layers absolute children over content. iOS renders the same Blade correctly.

  1. absolute children with two opposing insets don't stretch. In CSS (and in the iOS renderer), inset-x-0 stretches a child to full width and inset-0 makes it fill the container. Android only anchored the child to a corner — so absolute inset-x-0 justify-center collapsed to content size and hugged the left edge, and a childless absolute inset-0 overlay (the classic scrim) measured zero and was invisible.
  2. items-center justify-center stops 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):

<native:column class="w-full h-[170] relative items-center justify-center bg-white rounded-2xl">
    <native:column class="items-center gap-1">
        <native:text font="bold" class="font-bold text-xl">Centered content</native:text>
        <native:text class="text-sm text-zinc-500">items-center justify-center</native:text>
    </native:column>

    {{-- should stretch full width and center A/B --}}
    <native:row class="absolute top-[10] inset-x-0 justify-center gap-3">
        <native:column class="w-8 h-8 rounded-full bg-emerald-500 items-center justify-center"><native:text font="bold" class="font-bold text-white text-xs">A</native:text></native:column>
        <native:column class="w-8 h-8 rounded-full bg-rose-500 items-center justify-center"><native:text font="bold" class="font-bold text-white text-xs">B</native:text></native:column>
    </native:row>

    {{-- should tint the whole card --}}
    <native:rect class="absolute inset-0 bg-blue-500/15" />

    {{-- single-corner anchor: already worked, unchanged --}}
    <native:column class="absolute bottom-[10] right-[10] w-6 h-6 rounded-full bg-amber-400" />
</native:column>

What this does

  • Absolute children are measured and placed by a small custom Layout against 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 own justify-* works inside), negatives still overhang. Mirrors iOS placeAbsolute one-for-one.
  • The flow content takes its placement from the container's own justify/align.
  • Absolute children no longer influence the container's size (they never did on iOS).
  • No iOS or PHP changes.

Before / after (Android emulator, API 36, same Blade)

iOS reference (unchanged, both fixes match it):

… 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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant