Skip to content

Fix liquid glass flexbox#11134

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

Fix liquid glass flexbox#11134
VeinDevTtv wants to merge 6 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

View your CI Pipeline Execution ↗ for commit 6446372

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

☁️ Nx Cloud last updated this comment at 2026-03-16 22:46:40 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.

Update the iOS LiquidGlass FlexboxLayout test to compare the fixed 300 DIP container height using device pixels. The layout helper reports pixel sizes, so 300 DIP correctly renders as 900 px on a 3x simulator; this fixes an outdated test expectation rather than a flexbox regression.
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.

VeinDevTtv and others added 2 commits March 12, 2026 13:25
Remove the unrelated Label layout invalidation change and simplify glass support back to the SDK gate requested in PR review. Also drop runtime glass style global lookups and restore temporary measure-state overrides in finally blocks so the flexbox fix remains scoped and safe.
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