Little jump after modal opening (since Capacitor update from 7 to 8)

Capacitor
1

Hello, since the update, when I open a modal using the controller, I can see a little jump after the init opening animation.

const modal = await this.modalCtrl.create({
  component: MyModalComponent,
  cssClass: 'modal-fit',
  mode: 'md',
});

It seems to be related to the bottom-safe-space because it happens only when there is a navigation bar (Android) or a home indicator (IOS). Maybe something changed with Capacitor 8 with the render or the safe-area.

I’m trying to fix this but maybe someone has occurred and fixed this before?

Thanks for your help,
Loïc

2

@twestrick do you maybe have more information about the origin of this issue?

3

I am not sure. My app is still on Capacitor 7 :grimacing:

Are you using the new System Bars Capacitor Plugin API | Capacitor Documentation plugin?

4

I didn’t using it but I tried to install and defined this configuration :

SystemBars: {
	insetsHandling: 'css',
},

Unfortunately, that doesn’t change anything in my case :confused:

This is very strange because my modal opens and just after the opening, there is a jump as if a spacing style was added using JS but I don’t see anything (and there is no change in my code).

5

I think I found a workaround that fix the issue by forcing a padding bottom of 0px for the modal-wrapper.

I will try with this for the moment until I found a better fix that solve explain and solve the issue globally.

Thanks again for you help :slight_smile:

6

This was already reported here. Dev version with potential bug fix is available.