Deploying app on device leaves a portion on the top untappable

I am developing an app that should be locked on the device, therefore I am using it as a launcher on android. The app works perfectly in browser and emulator. However, when deployed on any android device there is a strip on the top of the screen the screen that it un-tappable. This happens irrelevant of the of the page/modal you are in the app. I am quite a beginner in Angular and Ionic. Please, let me know what further information you would need to better understand the problem. Thank you!

did you try on several devices or just one ?
what is the width of this strip? Perhaps you can put your buttons out of it?

The issue occurs on multiple devices. The strip is about 10 percent of the width/height of the screen, depending on the orientation. I thought about moving the whole content of the app down a notch, but that space is quite valuable.

have you the same issue if you build in the same way the blank app ? In other words, is it related to your src or to your ionic installation ?

I have another app built with the same version of ionic that does not have this problem so I believe it is related to my src.

If I were you, I would try to isolate the portion of code that causes troubleā€¦not easy job !

It is definitely something in the app. files or some configuration of the app. If I add a top margin to the main components of the app the un-reactive top strip does not move with it.