Modal Delay + Alert view Delay + Click Delay

Hi,
I’m developing an iOS application and I have a project with this settings

@ionic/cli-plugin-cordova       : 1.6.2
@ionic/cli-plugin-ionic-angular : 1.4.1
@ionic/cli-utils                : 1.7.0
ionic (Ionic CLI)               : 3.7.0

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 1.3.7
Cordova Platforms  : ios 4.4.0
Ionic Framework    : ionic-angular 3.2.1

System:

Node       : v6.10.3
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b
ios-deploy : 1.9.1
npm        : 3.10.10

and I have some problems about modal and alert view. It seems that after that the application shows an alert view or a modal view it’s necessary 1/2 seconds and then the controllers are available.

I explain me in another way. When I click on a button to show a modal view, it is immediately showed but if I click on a button inside the modal view (without waiting time) at first click the button doesn’t work. It seems that the modal view is showed but not completely loaded.

About alert view controller when I dismiss it , the hiding is very slow. Why?

Finally when I click on item in a list, the click is not very reactive. Why?

Thanks in advance.

Does this happen in ionic serve or on the device or emulator? Or both?

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Safari dev tools: https://ionic.zone/debug/remote-debug-your-app#ios Look at the console and network tabs for errors.

The problem about the click that is not reactive is only a problem on device. If I run the application on safari browser with the developer tool opened, it doesn’t happen.

The problems about delay (alert view and modal view) is a problem that I have verified on browser and device.

For device I mean physical device.

Any ideas?

Thanks.

Read the instructions again. You debug the webview running in your native app in Safari on your Macbook, not the app running in Safari.

I don’t see errors in console or network tab. It’s not necessary run the application on physical device, these are problems that happen also on browser execution.

I have fixed the problem about click on item of a list, there is this troubleshooting on official Ionic Page.

1 Like

Ahh!

There should be some better way to be notified about these…

What do you need to help me?

Nothing, but Ionic could think about a way to notify users about non-optimized click events that trigger the delay. No idea if this is actually possible though.

I have created a video to explain me, when I click on a button that opens a modal the button remains pressed for some milliseconds. Then the button returns to its original state. After that the buttons on modal are clickable. Why?

Button + Modal error

In this case I have pressed euro button.

Does this also happen when you remove the animation? Looks a bit to me that the button stays “clicked” until the modal is finished with everything.

You are right, the button stays clicked until the modal is finished with everything. Furthermore, if the modal hasn’t finished the loading, the buttons on it don’t work. How can i remove the animation?

That depends on your code, that styling and everything doesn’t look standard to me.

I have not worked on animation style but only on objects style. There is a way to disable the animation on modal (show or hide)?

This is a performance screenshot. It seems there are time without any operation.

Can you see the “de-focusing” of the button in the screenshot timeline?
If not: Where does it happen?

We are investigating why the “€” button stays “focused” longer than expected and then, without external input, gets “unfocused”, right?

The defocusing of the button is the timeline at 2200ms (green block). I’m investigating about the time lose from the painting of the modal to the defocusing of the euro button.

Ah, so the “Animation” at 2100?

I have solved. In my app.scss I had the override of a class as shown in this code

ion-backdrop {
  opacity: 0.5 !important;
}

After I have removed this piece of code, I had no more problems.

1 Like

How does it look like now?
Did this actually fix the “thing” we were seeing or is it just invisble now?

It has solved the thing we were seeing, now the animation to show and hide modal is without delay.