After a while popovers no longer open on Android

Ionic Framework Ionic Angular
1

Hi,
a few days ago I started having this problem with an Ionic4 app.

The problem occurs both when running the app locally with “ionic cordova run android --livereload” and after installing the apk.

The app works fine at first, but after closing and reopening it, the popovers no longer open.
Or better I think they open (because the web service that returns the data is called) but they are not visible.

Have you ever had this problem?
How can I debug it?
This is how I open a popover:

    async presentPopoverItemDetail(item: Item, ev: any) {
        const popover = await this.popoverController.create({
            component: ItemDetailPage,
            event: ev,
            translucent: false,
            componentProps: {
                item_data: JSON.stringify(item)
            },
            cssClass: 'item-detail-popover'
        });

        popover.onDidDismiss().then((dataPar: OverlayEventDetail) => {

			...some stuff

        });

        return await popover.present();
    }

Thank you very much

cld

2

You can start debugging it by looking into the live html page and have a look into the Elements and if the Popover Html is created and then why it’s not displayed. Should be under <ion-app>. Also maybe the Logs give some informations :blush:

1 Like
3

I have seen that when the problem occurs if I clean the cache of the app the popovers work again. But if I close and open the app the problem appears again.
However tomorrow i will check the live HTML Page. Thank you

4

I can see that popover is present in the page.
The name of the component is “app-view-area” with class “popover-viewport”.
It contains an ion-content element.
But it is not visible.

If I click again on the item that shows the popover it adds another popover in the DOM also invisible.

So the DOM seems to be the same when the popover is visible and when it is not visible.

ROTTO
ROTTO1880×976 373 KB

5

Have you found out what causes this? So an 0-height or wring css attribute like display: none?