Adding class with background image to ion-view causes draw issues?

ionic-v1
1

Hi guys.

Wondering if anyone else has seen this issue perhaps?

I have the following css class:

.mainMenuBackground{
background: url("../images/bg_main.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
background-size: cover;
}

Which simply sets an image as a page background and ensures it covers the screen properly.

I add this class to my ion-view tag like so:

<ion-view title="Main menu" class="mainMenuBackground">

However this seems to cause strange animation issues… When navigating from 1 screen to the next, the screens overlap, go black during transitions, just all round strangeness.

If I use an image tag below the ion-view tag to achieve the same result, the animation issues do not seem to occur, but I cannot get the CSS / HTML right to display the image properly this way. The image isn’t centered and doesn’t fill the screen like it does in the CSS class I provided.

Does anyone know if adding the CSS class to the ion-view will cause issues?

Or alternatively, any ideas on how I can achieve the same thing with an image tag under the ion-view tag?

Thanks a lot :smile:

2

I have a partial solution, but not really sure why it happened in the first place.

I removed the class from the ion-view tag and added an image just below it like so:

<img src="images/bg_main.jpg" class="bg" alt="">

Then created CSS like so:

.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -5000;  
}

Something else that made a big difference was changing my index.html from this:

<body ng-app="battleships" animation="slide-left-right-ios7">

To this:

<body ng-app="battleships" animation="slide-left-right">

That solved the issues where the backgrounds would overlap and draw strangely. I still get a bit of a black flicker or a lag when I move between pages though but this is far better than it was.

I wonder if this may have something to do with the devices having to downscale the images? I’ve included graphics at 2560x1440 to cater for devices like the G3, but then devices like the HTC One are downscaling to 1920x1080 and my 2012 Nexus 7 is downscaling to 1280x800 and clearly battling.

Would downscaling cause issues?