bug: swipeable modal does not toggle statusbar color for black background

[hansPeter055]

Feature Request

Ionic version:

[x] 5.x

Describe the Feature Request

On the iPhone X or any iPhone with an edge-to-edge display, in ionic the new iOS 13 style modal presents in a kind of wrong animation. The edges should start transform from the iPhone X round edges.

How it is in Ionic:

Describe Preferred Solution

How it should be:

It would be nice if anyone could add this animation when on an iPhone with an edge-to-edge display to start transforming the border-radius of the presenting element with the correct iPhone edge radius. And it should also change the statusbar color from black to white (in light mode).

Also in dark mode the background of the presenting element should transition to a dark gray.

[EinfachHans]

+1

[liamdebeasi]

Thanks, I agree that this should be automatic. As a temporary workaround, you can toggle the status bar color yourself when you open/close a modal.

[liamdebeasi]

Changing this to a feature request and this is going to require an update to Capacitor. For now, developers can manually toggle the status bar styles themselves.

[BerkeAras]

@liamdebeasi How is it possible to toggle the statusbar color manually? On native modals, the statusbar toggles if the modal is on the half height of the statusbar. Is it possible to get the top position of the modal?

[jakubforman]

I have a same issue, and annoying me.

Ionic 5 introduced Swipe to Close Modal on this link and on video toggling working perfect: https://ionicframework.com/blog/announcing-ionic-5/ but now its not working and status bar must be change manually.

Would be handy if can set the automatic change in modal property config or disable automatic and toggle maually when I want.

[liamdebeasi]

I have a same issue, and annoying me.

Ionic 5 introduced Swipe to Close Modal on this link and on video toggling working perfect: https://ionicframework.com/blog/announcing-ionic-5/ but now its not working and status bar must be change manually.

Would be handy if can set the automatic change in modal property config or disable automatic and toggle maually when I want.

The code that is running in the video changed the status bar manually as well. Capacitor v3 will give us the ability to do this automatically in Ionic Framework via the updated Status Bar plugin: https://capacitorjs.com/docs/v3/apis/status-bar#style.

[spencerdezartsmith]

With Capacitor 3 now released are there any plans to implement this? @liamdebeasi

[BerkeAras]

Any updates on this issue? @liamdebeasi?

[WilliamFischer]

• bump ... i love the card modals.. though i find this fix pretty essential. @liamdebeasi

[liamdebeasi]

Hi everyone,

I have a dev build with a proposed fix for this if anyone would like to test and provide feedback: 6.1.7-dev.11653592708.12aae268

(Note: This dev build works with any Ionic package (@ionic/angular, @ionic/vue, etc))

A few requirements for this:

1. Apps must be using Capacitor 3. This functionality will not work in Capacitor <= 2 or Cordova.
2. The @capacitor/status-bar plugin must be installed.

---

The remaining blocker here is to find out how to not break Capacitor 2 applications. When dismissing the modal, we call StatusBar.setStyle({ style: 'DEFAULT' }) which lets us revert the status bar style to its default state without having to know if an app is in dark/light mode. The 'DEFAULT' option was added in Capacitor 3.

As a result, if you were to try this in a Capacitor 2 application, you would see the status bar text turn to white when opening a modal. However, the text would never revert back to black, leaving the status bar in an inconsistent state for the rest of the session's lifespan.

Update: I have found a potential solution that would not degrade the Capacitor 2 experience. I have updated the dev build above.

[liamdebeasi]

Thanks for the issue. This has been resolved via #25424, and a fix will be available in an upcoming release of Ionic Framework. Please continue testing and let me know if you run into any issues. Thanks!

[WilliamFischer]

Hey @liamdebeasi

Thank you! I love this fix, however..

There are many different scenarios with this status bar thing... especially with a custom solution required for flipping back to the set colour.

May i recommend, simply, an option on the ModalOptions Interface, such as effectStatusBar?: boolean;

Obviously if this is disabled the status bar sticks to whatever has been previously set. Otherwise it applies this fix. Default should be true.

I know its a bit anti-my-previous-comment but this would just give a bit more control :)

[liamdebeasi]

I recommend opening a feature request for this.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. 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.