Skip to content

LiquidGlass / LiquidGlassContainer (iOS): padded content measured at the outer width and overflows by the padding #11561

Closed

Description

@aleclarson

Issue Description

On iOS, a LiquidGlass with horizontal padding measures its content at the full outer width, then lays it out offset by the leading padding. The content overflows the right edge by the padding amount and is clipped (clipsToBounds). LiquidGlassContainer has the same problem over AbsoluteLayout. A padded container with no set size comes out too small by its padding.

Cause: LiquidGlass.onMeasure and LiquidGlassContainer.onMeasure (added in #11134) set the effective padding and border to zero, delegate to GridLayout/AbsoluteLayout, then restore them:

https://github.com/NativeScript/NativeScript/blob/main/packages/core/ui/layouts/liquid-glass/index.ios.ts#L51-L87

The comment assumes the parent already removed the child's padding from the measure spec. Parent layouts don't do that:

  • View.measureChild / ViewHelper.measureChild subtracts only the child's margins.
  • The iOS FlexboxLayout builds child specs with getChildMeasureSpec(spec, this.effectivePadding* + lp.effectiveMargin*, …). That is the flexbox's own padding plus the child's margins, not the child's padding.

So GridLayout.onMeasure sees zero padding and measures the content at the full width. Then onLayout runs with the padding restored, and GridLayout.onLayout starts the column offsets at paddingLeft. The test added in #11134 uses glass without padding, so it never exercises this path.

Observed: a 353 pt wide LiquidGlass with 19 pt left/right padding holds a columns="*,*,*" child laid out at x = 19, width 353 (expected 315). Measured on an iOS 27.0 simulator; also seen on a physical device running iOS 27.0.1. Overriding onMeasure to call GridLayout.prototype.onMeasure directly gives x = 19, width 315.

The onLayout change from #11134 (normalizing to local coordinates for _contentHost) is correct and should stay.

Reproduction

<StackLayout>
  <LiquidGlass width="300" height="100" paddingLeft="20" paddingRight="20">
    <Label id="child" text="content" horizontalAlignment="stretch" />
  </LiquidGlass>
</StackLayout>

Expected child width: 260 at x = 20. With the current override, the code path gives 300 at x = 20, clipped on the right. That result comes from reading the source; the measured case is under Observed above.

Relevant log output (if applicable)

No response

Environment

@nativescript/core 9.1.3 (also present on main)
iOS 26+ / 27.0 simulator and device

Please accept these terms

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions