Skip to content

Fix liquid glass flexbox#11134

Open
VeinDevTtv wants to merge 3 commits intoNativeScript:mainfrom
VeinDevTtv:fix-liquid-glass-flexbox
Open

Fix liquid glass flexbox#11134
VeinDevTtv wants to merge 3 commits intoNativeScript:mainfrom
VeinDevTtv:fix-liquid-glass-flexbox

Conversation

@VeinDevTtv
Copy link
Contributor

PR Checklist

What is the current behavior?

Currently on iOS, placing a LiquidGlass or LiquidGlassContainer component inside a FlexboxLayout completely breaks the layout (children are measured incorrectly and positioned at the wrong coordinates). This is because LiquidGlass overrides _addViewToNativeVisualTree to use a nested _contentHost view, which mismatches FlexboxLayout's standard measurement and layout paradigms.

What is the new behavior?

  1. Measurement fix: Overrode onMeasure in both LiquidGlass and LiquidGlassContainer to temporarily zero out padding/border properties before delegating to super.onMeasure(). This prevents GridLayout / AbsoluteLayout from double-subtracting padding that FlexboxLayout already removed from the child measure spec.

  2. Layout fix: Overrode onLayout in both classes to call super.onLayout(0, 0, right - left, bottom - top). Since FlexboxLayout positions the root UIVisualEffectView using absolute coordinates, the internal NativeScript layout engine needs normalized (0, 0, width, height) bounds to correctly position children within the local _contentHost coordinate space.

Fixes #11099.

@nx-cloud
Copy link

nx-cloud bot commented Mar 11, 2026

🤖 Nx Cloud AI Fix Eligible

An automatically generated fix could have helped fix failing tasks for this run, but Self-healing CI is disabled for this workspace. Visit workspace settings to enable it and get automatic fixes in future runs.

To disable these notifications, a workspace admin can disable them in workspace settings.


View your CI Pipeline Execution ↗ for commit b9e72c5

Command Status Duration Result
nx test apps-automated -c=ios ❌ Failed 3m 9s View ↗
nx run-many --target=test --configuration=ci --... ✅ Succeeded 2s View ↗

☁️ Nx Cloud last updated this comment at 2026-03-11 08:21:55 UTC

- fall back to plain UIVisualEffectView when glass APIs are unavailable
- guard glass effect runtime access behind capability checks
- request layout for iOS 18+ label text changes even for fixed-size labels
- add automated regression coverage for liquid glass effect updates
if (this._fixedSize === FixedSize.WIDTH && !this.textWrap && this.getMeasuredHeight() > 0) {
// Single line label with fixed width will skip request layout on text change.
return;
if (SDK_VERSION < 18) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@VeinDevTtv How does this change affect liquid glass flex?
Because if you did that to make the failing test pass, it's irrelevant and not very desirable.
We should track the real cause of it failing and why the check is there to begin with.

export const SDK_VERSION = parseFloat(UIDevice.currentDevice.systemVersion);

function hasRuntimeGlobal(name: 'UIGlassEffect' | 'UIGlassContainerEffect' | 'UIGlassEffectStyle'): boolean {
return typeof (globalThis as any)?.[name] !== 'undefined';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Better to just rely on the SDK_VERSION check alone. runtime global checks like this shouldn't be needed when the SDK level is the best defining line. In other words, the supportsGlass check should be sufficient alone without this.

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.

LiquidGlass in FlexboxLayout broken

3 participants