bug: Popover CSS Shadow Parts not work on android 8.0

[Lyfei]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v6.x

Current Behavior

Modify the CSS Shadow Parts of a content, worked on android 11, but not work on android 8.0;

Expected Behavior

Worked on android 8.0

Steps to Reproduce

html:

<ion-popover [isOpen]="isOpenPopOver" (ionPopoverDidDismiss)="selectOnDidDismiss($event)">
    <ng-template>
        <!-- custom component-->
        <app-multiple-select [selectOptions]="selectOptions"></app-multiple-select>
    </ng-template>
</ion-popover>

add css on global.scss

ion-popover::part(content){
  border-radius: 0;
  width: 100%;
  left: 0 !important;
  box-shadow: none;
}

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.20.9 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 6.7.3 @angular-devkit/build-angular : 12.2.17 @angular-devkit/schematics : 12.2.17 @angular/cli : 12.2.17 @ionic/angular-toolkit : 5.0.3

Capacitor:

Capacitor CLI : 4.6.1 @capacitor/android : 4.6.1 @capacitor/core : 4.6.1 @capacitor/ios : 4.6.1

Utility:

cordova-res (update available: 0.15.4) : 0.8.1 native-run : 1.7.2

System:

NodeJS : v12.14.1 (/usr/local/bin/node) npm : 6.13.4 OS : macOS Monterey

Additional Information

No response

[liamdebeasi]

Thanks for the report. The webview version is what determined support, not the Android version. What is the webview version on your Android 8.0 device? You can find this by logging window.navigator.userAgent when inspecting the app using Chrome dev tools.

[Lyfei]

Thanks for the report. The webview version is what determined support, not the Android version. What is the webview version on your Android 8.0 device? You can find this by logging window.navigator.userAgent when inspecting the app using Chrome dev tools.

version: Chrome/70.0.3538.110

[liamdebeasi]

CSS Shadow Parts were supported on Chrome starting in Chrome 73, so you will need to upgrade to that version to use it: https://caniuse.com/?search=shadow%20parts

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!