Transparent CSS not working in Android #10360
Description
Issue Description
Transparent CSS is not working in Android but it works in iOS.
I have a modal page that suppose to show transparent background. In Android when the modal loaded, it shows a white background instead of transparent.
Code that opens the modal :
const config: SharedTransitionConfig = {
pageStart: {
opacity: 0
},
pageEnd: {
opacity: 1,
duration: 1000,
spring: { tension: 110, friction: 9, mass: 1 },
},
pageReturn: {
opacity: 0,
duration: 500,
spring: { tension: 70, friction: 9, mass: 2 }
},
};
const options: ModalDialogOptions = {
viewContainerRef: this.vcRef,
cancelable: true,
fullscreen: true,
transition: SharedTransition.custom(new ModalTransition(), config),
};
this.modal.showModal(ModalComponent, options).then((result: string) => {
});
The Modal Component HTML :
<RootLayout class="bgco-transparent">
<GridLayout></GridLayout>
bgco-transparent CSS Class :
.bgco-transparent {
background-color: transparent;
background: transparent;
background: rgba(0, 0, 0, 0); //Tried this as well, not working
}
Reproduction
No response
Relevant log output (if applicable)
No response
Environment
OS: macOS 13.4.1
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Shell: /bin/zsh
node: 14.21.3
npm: 6.14.18
nativescript: 8.5.3
# android
java: 11.0.18
ndk: Not Found
apis: 31, 32, 33, 33
build_tools: 33.0.2
system_images:
- android-31 | Google APIs Intel x86_64 Atom
# ios
xcode: 14.3/14E222b
cocoapods: 1.12.1
python: Not Found
python3: 3.9.6
ruby: 2.7.8
platforms:
- DriverKit 22.4
- iOS 16.4
- macOS 13.3
- tvOS 16.4
- watchOS 9.4Dependencies
"dependencies": {
"@angular/animations": "~15.2.0",
"@angular/common": "~15.2.0",
"@angular/compiler": "~15.2.0",
"@angular/core": "~15.2.0",
"@angular/forms": "~15.2.0",
"@angular/platform-browser": "~15.2.0",
"@angular/platform-browser-dynamic": "~15.2.0",
"@angular/router": "~15.2.0",
"@nativescript/angular": "~15.2.0",
"@nativescript/camera": "^5.0.12",
"@nativescript/core": "^8.4.7",
"@nativescript/theme": "^3.0.0",
"@types/underscore": "^1.9.4",
"nativescript-ui-listview": "^15.2.3",
"zone.js": "~0.13.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "~15.2.0",
"@angular/compiler-cli": "~15.2.0",
"@nativescript-dom/angular-types": "^1.0.6",
"@nativescript-dom/core-types": "^1.0.25",
"@nativescript/android": "~8.5.0",
"@nativescript/ios": "~8.5.2",
"@nativescript/types": "~8.5.0",
"@nativescript/webpack": "5.0.16",
"@ngtools/webpack": "~15.2.0",
"nativescript-worker-loader": "^0.12.1",
"ts-loader": "^8.0.18",
"typescript": "~4.8.4"
}Please accept these terms
- I have searched the existing issues as well as StackOverflow and this has not been posted before
- This is a bug report
- I agree to follow this project's Code of Conduct