Transparent background for content not working on iOS

Ionic Framework ionic-v3
1

hello,

in my application i am using a background image for the whole app and the pages use the ion-content with

ion-content, .content-ios {
    background:none
}

this works like charm on android and in desktop but on iOS ( even simulated in Chrome ) it does not work but instead i get a black background.

any ideas?

2

Try this:

ion-app {
    background: none;

    ion-content, .content-ios {
        background: none;

        ion-list {
            background: none;
            opacity: 0.6;
        }
    }
}
3

thanks, but that did not help. still black

4

The problem then is because you have a layer on some level with black color, which you have to put transparent. This example I tried in my application and it works perfectly. To solve the problem you need knowledge of CSS.

5

hey, can you show the code for this please :slight_smile:

6

hello, you can try with the standart “sidemenu” template:
and add this scss:

ion-app{
background: url('../../assets/img/bg.jpg');
background-repeat: no-repeat;
background-size:cover;


}
ion-content {
background:none
}
ion-app.md [padding], ion-app.md [padding] .scroll-content{
background:none
}
ion-app.ios [padding], ion-app.ios [padding] .scroll-content{
background:none
}

thanks

7

I just tried this code below and it caused the app background to turn black (just like yours)… I then tried to figure what the problem was, but by commenting out background:none; it fixed the problem. But when I uncommented this, it went black again. Then the problem was fixed by itself after few mins.

ion-content.ios [padding], ion-content.ios [padding] .scroll-content{
    background:none;
}

Not sure if this was a temperory bug, but does your background work now? it worked for me by doing nothing :smile:

Hope some moderator can help or explain this issue :slight_smile:

8

i am testing in chrome desktop ( macos ) and the issue persists.

9

Add the following line into src/theme/variables.scss

$content-ios-transition-background: transparent;

Default value of this variable is black. It makes the background black!

8 Likes
10

thx, worked like a charm

11

Is it me or this is not working anymore?

I have a black background somewhere but I cannot find it out.

I even tried this. I still have a black background (the tag has a transparent class ) :

    $content-ios-transition-background: transparent;
    &.transparent {
        *::after,
        *::before,
        *{
            background-color: transparent;
        }
    }

I even created a plugin that put a transparent background in all UIView:

        [view setOpaque:NO];
        [view setBackgroundColor: [UIColor clearColor]];

I am using

s: (/Users/millerf/Documents/www/Mozaik/mzk_app/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.1.4
Cordova Platforms  : ios 4.5.2
Ionic Framework    : ionic-angular 3.9.2

Anyone has any idea?

12

Actually I got it fixed.

$content-ios-transition-background HAS to be in variables.scss. I did put it within a sub scss file.

1 Like
13

add this class

.transparent {

–background: transparent!important;

BACKGROUND: TRANSPARENT!IMPORTANT;

}