Skip to content

fix(ios): measure padded LiquidGlass content inside its padding #11562

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
NathanWalker merged 2 commits into from
Oct 21, 2026
Merged

fix(ios): measure padded LiquidGlass content inside its padding #11562

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
48ba7fd
fix(ios): measure padded LiquidGlass content inside its padding
aleclarson Oct 21, 2026
aa52e0d
test(ios): trim LiquidGlass padding test comment
NathanWalker Oct 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 45 additions & 0 deletions apps/automated/src/ui/layouts/flexbox-layout-tests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1834,3 +1834,48 @@ export const testLiquidGlassViews_do_not_crash_when_updating_iosGlassEffect = is
TKUnit.assertTrue(root.isLoaded, 'Liquid glass view tree should remain loaded after glass effect updates.');
})
: undefined;

let getGlassViews = (template: string) => {
let root = Builder.parse(template);

return {
root,
parent: root.getViewById('parent') as View,
glass: root.getViewById('glass') as View,
child: root.getViewById('child') as View,
};
};

// Parents subtract only a child's margins from its measure spec, so glass views must deduct their own padding.

let activity_liquidglass_padding = () =>
getGlassViews(
`<FlexboxLayout iosOverflowSafeArea="false" id="parent" width="300" height="300" flexDirection="${FlexDirection.ROW}" backgroundColor="gray">
<LiquidGlass id="glass" width="300" height="100" paddingLeft="20" paddingRight="20">
<Label id="child" text="content" horizontalAlignment="stretch" />
</LiquidGlass>
</FlexboxLayout>`,
);

export const testLiquidGlassFlexboxLayout_padding_measures_content_box = isIOS
? test(activity_liquidglass_padding, noop, ({ glass, child }) => {
closeEnough(width(child), dipToDp(260), `Expected ${child} width to equal glass width minus 2x20 padding`);
isLeftWith(glass, child, dipToDp(20), `Expected ${child} to start 20dip inside ${glass}`);
})
: undefined;

let activity_liquidglasscontainer_autowidth = () =>
getGlassViews(
`<FlexboxLayout iosOverflowSafeArea="false" id="parent" flexDirection="${FlexDirection.ROW}" alignItems="${AlignItems.FLEX_START}" backgroundColor="gray">
<LiquidGlassContainer id="glass" paddingLeft="20" paddingRight="20" paddingTop="10" paddingBottom="10">
<Label id="child" width="100" height="40" />
</LiquidGlassContainer>
</FlexboxLayout>`,
);

export const testLiquidGlassContainerFlexboxLayout_padding_wraps_content = isIOS
? test(activity_liquidglasscontainer_autowidth, noop, ({ glass }) => {
closeEnough(width(glass), dipToDp(140), `Expected ${glass} width to equal child width plus 2x20 padding`);
closeEnough(height(glass), dipToDp(60), `Expected ${glass} height to equal child height plus 2x10 padding`);
})
: undefined;
38 changes: 0 additions & 38 deletions packages/core/ui/layouts/liquid-glass-container/index.ios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,44 +55,6 @@ export class LiquidGlassContainer extends LiquidGlassContainerCommon {
return false;
}

// When LiquidGlassContainer is a child of FlexboxLayout (or any layout that passes
// a measure spec already reduced by the child's padding), AbsoluteLayout.onMeasure
// would subtract our padding a second time. To prevent this double-deduction we
// temporarily zero the effective padding/border values before delegating to the
// AbsoluteLayout measurement, then restore them immediately after.
public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
const pl = this.effectivePaddingLeft;
const pr = this.effectivePaddingRight;
const pt = this.effectivePaddingTop;
const pb = this.effectivePaddingBottom;
const bl = this.effectiveBorderLeftWidth;
const br = this.effectiveBorderRightWidth;
const bt = this.effectiveBorderTopWidth;
const bb = this.effectiveBorderBottomWidth;

this.effectivePaddingLeft = 0;
this.effectivePaddingRight = 0;
this.effectivePaddingTop = 0;
this.effectivePaddingBottom = 0;
this.effectiveBorderLeftWidth = 0;
this.effectiveBorderRightWidth = 0;
this.effectiveBorderTopWidth = 0;
this.effectiveBorderBottomWidth = 0;

try {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
} finally {
this.effectivePaddingLeft = pl;
this.effectivePaddingRight = pr;
this.effectivePaddingTop = pt;
this.effectivePaddingBottom = pb;
this.effectiveBorderLeftWidth = bl;
this.effectiveBorderRightWidth = br;
this.effectiveBorderTopWidth = bt;
this.effectiveBorderBottomWidth = bb;
}
}

// When children animate with translate (layer transform), UIVisualEffectView-based
// container effects may recompute based on the underlying frames (not transforms),
// which can cause jumps. Normalize any residual translation into the
Expand Down
38 changes: 0 additions & 38 deletions packages/core/ui/layouts/liquid-glass/index.ios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,44 +48,6 @@ export class LiquidGlass extends LiquidGlassCommon {
return false;
}

public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
// When LiquidGlass is a child of FlexboxLayout (or any layout that passes a child
// measure spec already reduced by the child's padding), GridLayout.onMeasure would
// subtract our padding a second time. To prevent this double-deduction we temporarily
// zero the effective padding/border values before delegating to the GridLayout
// measurement, then restore them immediately after.
const pl = this.effectivePaddingLeft;
const pr = this.effectivePaddingRight;
const pt = this.effectivePaddingTop;
const pb = this.effectivePaddingBottom;
const bl = this.effectiveBorderLeftWidth;
const br = this.effectiveBorderRightWidth;
const bt = this.effectiveBorderTopWidth;
const bb = this.effectiveBorderBottomWidth;

this.effectivePaddingLeft = 0;
this.effectivePaddingRight = 0;
this.effectivePaddingTop = 0;
this.effectivePaddingBottom = 0;
this.effectiveBorderLeftWidth = 0;
this.effectiveBorderRightWidth = 0;
this.effectiveBorderTopWidth = 0;
this.effectiveBorderBottomWidth = 0;

try {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
} finally {
this.effectivePaddingLeft = pl;
this.effectivePaddingRight = pr;
this.effectivePaddingTop = pt;
this.effectivePaddingBottom = pb;
this.effectiveBorderLeftWidth = bl;
this.effectiveBorderRightWidth = br;
this.effectiveBorderTopWidth = bt;
this.effectiveBorderBottomWidth = bb;
}
}

public onLayout(left: number, top: number, right: number, bottom: number): void {
// GridLayout.onLayout computes column/row offsets relative to (left, top), then
// adds its own padding on top. Since the FlexboxLayout (or parent) already placed
Expand Down
Loading