Ionic v1 Black screen On Modals

I’m experiencing a problem with modals in ionic v1. Modals are working perfectly but on some systems, when opening a modal, a black screen appears on the modal window. Does anyone faced this problem?

What kind of systems face this issue. Have you tried dev tools to debug the screen?

I found this mainly on systems with Atom processors, but found this on some other systems also. Seems to be a rendering issue. I’m using electron to pack the app and checked dev tools, but there was nothing different.

Post your ionic info output please.
Also include you build command.


ionic info gives the below ouput

Cordova CLI: 6.0.0
Gulp version:  CLI version 3.9.1
Gulp local:
Ionic Version: 1.2.4-nightly-1917
Ionic CLI Version: 1.7.13
Ionic App Lib Version: 0.6.5
OS: Windows 7 SP1
Node Version: v5.4.0

For building the app, I use Electron. So I copy www folder and paste it Electron project folder.


Ugh, I think you should do some serious updating:

Recent version of Ionic v1 is 1.3.3.

This is at 3.x now.

This is at 7.0.x - although not really needed for electron of course.

1 Like

Ok, I’ll try updating Ionic version and check if the problem resolves

Thank you

1 Like

Little late, Updating ionic didn’t solved my problem.I found out the problem and applied a temporary fix. But still don’t have a permanent fix.

This issue pops up only with ionic modals in touch screen devices. Height of modal scroll-content
is auto adjusted on touch and so the black background-color of ion-modal-view is visible.

I fixed it by adding the css,

.modal .scroll-content{

I am attaching some screenshots also.