search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
50.93k stars 13.52k forks source link

bug: older browsers show sheet modal with a flicker (no web animations support) #25355

Open fywstar opened 2 years ago

fywstar commented 2 years ago

Prerequisites

Ionic Framework Version

Current Behavior

Sheet modal flickers when the animation comes to end on some old Androids, which do not support web animations.

Expected Behavior

Sheet modal does not flicker.

Steps to Reproduce

I just wrote a simple example, and run it on an Android device.

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.19.1 Ionic Framework : @ionic/angular 6.1.6 @angular-devkit/build-angular : 13.2.6 @angular-devkit/schematics : 13.2.6 @angular/cli : 13.2.6 @ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 3.5.1 @capacitor/android : 3.5.1 @capacitor/core : 3.5.1 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : 1.6.0

System:

NodeJS : v14.18.2 npm : 6.14.15 OS : macOS Monterey

Additional Information

Uploading IMG_0298.MOV…

fywstar commented 2 years ago

Video here: https://user-images.githubusercontent.com/7477831/170455693-16ae12dd-5f40-4d23-9dec-9d6d5fb4cc37.MOV

averyjohnston commented 2 years ago

Thanks for the issue. Could you specify what device and Android version you're testing on?

liamdebeasi commented 2 years ago

In addition to that, can you also specify which version of the Android webview you have installed? You can find this by logging window.navigator.userAgent when debugging the app using Chrome Dev Tools.

fywstar commented 2 years ago

Thanks for your feedback, additional info as below:

Device: Galaxy S8 SC-02J Android version: 9 window.navigator.userAgent: "Mozilla/5.0 (Linux; Android 9; SC-02J Build/PPR1.180610.011; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/72.0.3626.121 Mobile Safari/537.36"

liamdebeasi commented 2 years ago

Thanks, that was helpful additional information. Are you able to update the webview at all?

fywstar commented 2 years ago

I'm afraid I can't update the webview, this is customer's demand. I hope you could help me out...

liamdebeasi commented 2 years ago

Thanks. Are you able to provide a GitHub repo that I can test this with?

fywstar commented 2 years ago

Test repo here: https://github.com/fywstar/sheet-modal, just a plain sheet modal I think.

DavidWiesner commented 2 years ago

I run ionic 6.1.11 on ios 12.5 and the sheet modal also flickers and i'm sometime unable to move it in any way. Only on older os-versions the modal will also open 100% while my initial breakpoint is 0.5.