Android only: Background transparency broken after back navigation

[cjohn001]

Hello together, I am using ui-material-tabs. My tabs background is semitransparent to allow for the background image to shine through. See attached images. When I navigate away from the tabs page and navigate back to it, the material tabs loose the background transparency (background is white). Version 6.2.11 of @nativescript-community/ui-material-tabs is working fine. With version 6.2.12 and 6.2.13 I am observing the issue.

Which platform(s) does your issue occur on?

• Android
• SDK 30 and 31 tested
• emulator and device. Samsung Galaxy

Please, provide the following version numbers that your issue occurs with:

• CLI: (run tns --version to fetch it) -8.1.5-next-02-10-2022-1825431584
• Cross-platform modules: (check the 'version' attribute in the "@nativescript/core": "8.1.5"
• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the package.json file of your project) "@nativescript/android": "8.2.0-alpha.11"
• Plugin(s):
• "dependencies": { "@angular/animations": "13.2.2", "@angular/common": "13.2.2", "@angular/compiler": "13.2.2", "@angular/core": "13.2.2", "@angular/forms": "13.2.2", "@angular/platform-browser": "13.2.2", "@angular/platform-browser-dynamic": "13.2.2", "@angular/router": "13.2.2", "@apollo/client": "3.5.8", "@nativescript-community/ui-material-tabs": "6.2.11", "@nativescript/angular": "13.0.1", "@nativescript/core": "8.1.5", "@nativescript/iqkeyboardmanager": "2.0.0", "@nativescript/localize": "5.0.4", "@nativescript/mlkit-barcode-scanning": "1.0.0-alpha.8", "@nativescript/mlkit-core": "1.0.0-alpha.8", "@nativescript/secure-storage": "3.0.0", "@nativescript/theme": "3.0.2", "@nativescript/ui-charts": "file:../mnd-custom-plugins/nativescript-ui-charts/publish/package/nativescript-ui-charts-0.1.10.tgz", "apollo-angular": "3.0.0-alpha.2", "apollo3-cache-persist": "0.14.0", "d3-ease": "3.0.1", "graphql": "16.3.0", "graphql-tag": "2.12.6", "intl": "1.2.5", "moment": "2.29.1", "nativescript-oauth2-ext": "file:../mnd-custom-plugins/nativescript-oauth2-ext/publish/package/nativescript-oauth2-ext-3.0.0.tgz", "nativescript-sqlite": "2.8.6", "nativescript-ui-autocomplete": "8.0.1", "nativescript-ui-calendar": "file:../mnd-custom-plugins/plugins-ui/dist/packages/ui-calendar/nativescript-ui-calendar-8.0.2.tgz", "nativescript-ui-gauge": "8.0.1", "rxjs": "7.5.4", "uuid": "8.3.2", "zone.js": "0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "13.2.3", "@angular/compiler-cli": "13.2.2", "@graphql-codegen/cli": "2.6.1", "@graphql-codegen/fragment-matcher": "3.2.1", "@graphql-codegen/introspection": "2.1.1", "@graphql-codegen/typescript": "2.4.3", "@graphql-codegen/typescript-apollo-angular": "3.3.3", "@graphql-codegen/typescript-operations": "2.3.0", "@nativescript/android": "8.2.0-alpha.11", "@nativescript/ios": "8.2.0-alpha.6", "@nativescript/types": "8.1.1", "@nativescript/webpack": "5.0.4", "@ngtools/webpack": "13.2.3", "@types/d3-ease": "3.0.0", "@types/intl": "1.2.0", "@types/node": "16.11.6", "@types/uuid": "8.3.4", "keycloak-request-token": "0.1.0", "rimraf": "3.0.2", "sass": "1.49.7", "ts-node": "10.5.0", "typescript": "4.5.5" }

[cjohn001]

I was able to solve the issue. In the past I had not to set MDTabs { background-color: transparent; }

It was sufficient to have MDTabContentItem { background-color: transparent; }

Since 6.2.12 now both have to be set.