Modal background bug

ionic-v1
1

Hi,

I think there is a bug when you open a modal, sometimes you can see the content behind the modal. The background-color of the modal seems not to be applied (it should cover the content behind the modal). However when you resize the windows, the modal cover the whole content. I saw this in Chrome browser. It will work well after resizing the window. You can see this behavior here.

2

Your Codepen example doesn’t work for me, but I’m able to reproduce it in my current project after updating to 0.9.25

3

What browser are you seeing this bug?

4

Experienced this in iOS 7 as well. Sometimes in Chrome.

My “fix” for it was to check the status of the modal and hide the underlying content if the modal was open:

<ion-content ng-show="!modal.isShown()"></ion-content>

So, when the modal opened, the content underneath was hidden. When the modal was hidden, the main view content was visible. Ugly hack, but thought it was just due to something stupid I was doing.

5

I’m using the latest Chrome (33.0.1750.117) on OSX Mavericks

6

Would this group be able to update your code to the nightly build and see if you still have the transparent background issues? It looks like in 0.9.25 the method of enabling/disabling pointer events was causing a bug, but since then I’ve rewritten how that all works.

Please give the nightly build a shot and let me know if it fixed it for you, thanks:
http://code.ionicframework.com/#nightly

7

Adam. Sorry I can’t here. I pulled out all of my modals so I can’t test the nightly.

8

I don’t have much time today to investigate further, but when I plop the nightly in place I get this on line 78 of Angular.js
(index):1
Uncaught Error: [$injector:modulerr] Failed to instantiate module thingdom due to:
Error: [$injector:modulerr] Failed to instantiate module ionic due to:
Error: [$injector:modulerr] Failed to instantiate module ionic.ui due to:
Error: [$injector:mo……1)

That may be my own code breaking things. Can’t say for sure yet. I’ll have more info tomorrow.

9

Hi Adam,

i just tested with the nigthly and it’s working nice in Chrome. However, during the slide up animation the content behind the modal still visible (the background is transparent). It will only be hidden at the end of the slide up animation (the background become white).

10

Spoke too soon: works for me now. Created a pen to show this: http://codepen.io/anon/pen/nJsov

11

It works for me too in your codepen. I am unable to reproduce what is happening in my case in codepen.
But the behavior I described earlier only happen if I set the attribute "overflow-scroll=“true” in the “ion-content” element.

Any hints?

Thanks

12

I added 2 screenshots : tested in Chrome. The first one is during the slide-up animation before the modal rich the top of the window(we can see the list in the background), the second is after the slide-animation (the modal covers the list).
First one:

Second one:

I’m working on showing it in a Plunk

13

Can i check, the modal backdrop works on browser when run ionic serve, when i push it to my ios or android, i cannot see the backdrop, (as the background is not dimmed when the modal is called)