Ionic - black background on rubber band effect on iOS

Question

I have disabled rubber band effect on the body, but it is still active on inner divs, and that is fine.

However, when the portion above the scrolled element is shown, the background is black, like in the image:

I have tried to assign explicit colors to all parent containers, but nothing seems to work. Do you know how to set that color?

Answer 1

I had the same issue, but with background img. On android/windows background image looked fine, but on ios the screen was somehow filled with the black. After looking through the DOM tree, I finally found this:

.ios .ion-page.show-page ~ .nav-decor {
top: 0;
position: absolute;
z-index: 0;
display: block;
width: 100%;
height: 100%;
background: #000;
pointer-events: none;}

So in app.scss I put (dirty solution):

.ios .nav-decor{background:transparent !important;}

Answer 2

Yes.I got the same issue. I tried to style it but i failed because can't find any element with black background. i think it is coming from webview. But i found a funny work around for this i don't know it will work for you.

My work around

i inserted a blank div with class "ios-black-screen-fix"

<ion-content class="white-bg">
    <div class="ios-black-screen-fix"></div>
    ........................................
    ........................................
</ion-content>

in css

.ios-black-screen-fix {
    height: 1px;
}