Skip to content

Rescaling issue with liquid glass #11094

@cjohn001

Description

@cjohn001

Issue Description

I am trying to use the new liquid glass components. I see a rescaling issue on iPad. When window is resized the liquidGlass container behaves random, even so I have all dimensions fixed to static values. The attached video best shows the issue, Look for the menu bar top left "Main Menu" button. The issue also persists when using a LiquidGlassContainer around the LiquidGlass component

LiquidClassBrokenRescaling.mov

Reproduction

Here. a minimum code example
`
<GridLayout [rows]="_rows()" columns="*" class="mnd" iosOverflowSafeArea="true" class="side-bar-gradient mnd p-x-10" style="border-radius: 0 15 15 0; margin: 15 0 15 0;">

	<LiquidGlass row="1" col="0" width="230" height="60" horizontalAlignment="left" class="zero" [isEnabled]="_homeBtnEnabled()" (tap)="onGoHome()">
		<Label text="&#xe070;" width="50" height="60" class="fsap icon-font-button zero" [isEnabled]="_homeBtnEnabled()" textAlignment="center"
			horizontalAlignment="left"></Label>
		<Label row="1" text="{{ 'general.strMainMenu' | L }}" width="180" height="60" translateX="50" class="h1 always-white-text" horizontalAlignment="left"
			[isEnabled]="_homeBtnEnabled()"></Label>
	</LiquidGlass>

`

Relevant log output (if applicable)

Environment

OS: macOS 26.3
CPU: (10) arm64 Apple M1 Pro
Shell: /bin/zsh
node: 24.12.0
npm: 11.6.2
nativescript: 9.0.3

# android
java: 17.0.14
ndk: Not Found
apis: Not Found
build_tools: Not Found
system_images: Not Found

# ios
xcode: 26.2/17C52
cocoapods: 1.16.2
python: 3.13.2
python3: 3.13.2
ruby: 3.4.2
platforms: 
  - DriverKit 25.2
  - iOS 26.2
  - macOS 26.2
  - tvOS 26.2
  - visionOS 26.2
  - watchOS 26.2

Dependencies

"dependencies": {
  "@angular/animations": "21.1.4",
  "@angular/common": "21.1.4",
  "@angular/compiler": "21.1.4",
  "@angular/core": "21.1.4",
  "@angular/forms": "21.1.4",
  "@angular/platform-browser": "21.1.4",
  "@angular/platform-browser-dynamic": "21.1.4",
  "@angular/router": "21.1.4",
  "@apollo/client": "4.1.4",
  "@mnd/sqlcipher": "file:../app-plugins/dist/packages/sqlcipher/mnd-sqlcipher-1.0.0.tgz",
  "@nativescript/angular": "21.0.0",
  "@nativescript/core": "9.0.13",
  "@nativescript/iqkeyboardmanager": "2.1.2",
  "@nativescript/localize": "5.2.0",
  "@nativescript/secure-storage": "4.0.1",
  "@nativescript/theme": "3.1.0",
  "apollo-angular": "13.0.0",
  "apollo3-cache-persist": "0.15.0",
  "d3-ease": "3.0.1",
  "graphql": "16.12.0",
  "graphql-tag": "2.12.6",
  "intl": "1.2.5",
  "moment": "2.30.1",
  "nativescript-oauth2-ext": "file:../app-plugins-customized/nativescript-oauth2-ext/publish/package/nativescript-oauth2-ext-3.0.5.tgz",
  "nativescript-ui-calendar": "15.2.3",
  "nativescript-ui-gauge": "15.2.3",
  "rxjs": "7.8.2",
  "util": "0.12.5",
  "url": "0.11.4",
  "uuidjs": "5.1.0"
},
"devDependencies": {
  "@angular-devkit/build-angular": "21.1.4",
  "@angular/compiler-cli": "21.1.4",
  "@graphql-codegen/cli": "6.1.1",
  "@graphql-codegen/fragment-matcher": "6.0.0",
  "@graphql-codegen/introspection": "5.0.0",
  "@graphql-codegen/typescript": "5.0.7",
  "@graphql-codegen/typescript-apollo-angular": "4.0.1",
  "@graphql-codegen/typescript-operations": "5.0.7",
  "@nativescript/android": "9.0.2",
  "@nativescript/ios": "9.0.3",
  "@nativescript/types": "9.0.0",
  "@nativescript/webpack": "5.0.31",
  "@ngtools/webpack": "21.1.4",
  "@types/d3-ease": "3.0.2",
  "@types/intl": "1.2.2",
  "@types/lodash": "4.17.23",
  "@types/node": "25.2.3",
  "keycloak-request-token": "0.1.0",
  "patch-package": "^8.0.1",
  "rimraf": "6.1.3",
  "sass": "1.97.2",
  "ts-node": "10.9.2",
  "typescript": "5.9.3"
}

Please accept these terms

Metadata

Metadata

Assignees

No one assigned

    Labels

    bug-pending-triageReported bug, pending triage to confirm.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions