Unable to customize ion-content when in side menu

[mhartington]

If on chrome, everything is styled correctly. But when you view the codpen in safari, you're unable to style the content.
Nightly Builds
http://codepen.io/mhartington/pen/qulLj

This is not an issue with beta 4 however
http://codepen.io/mhartington/pen/hKDim

[mhartington]

Appears to be because of this commit 6e149ee

Removing -webkit-backface-visibility: hidden; from scroll causes the issue.

http://codepen.io/mhartington/pen/asmde

[mlynch]

I don't know if that's the issue. Try adding it explicitly, it doesn't fix it:

http://codepen.io/anon/pen/hwLEx

[mlynch]

So, it seems like without backface visibility, the z-index 0 on the side menu content scroll is causing issues. Maybe it's really a z-index bug that is just showing through with backface stuff?

[fatihsever]

I've same issue. But my problem is not related browser. Side menu custom background styles not working properly in retina displays (tested with retina ipad and mac book pro retina) but it works other devices (tested with nexus 5, iphone 3gs, PC [chrome, safari]).

[fatihsever]

I've added "!important " and tried again with mac book pro retina. It works in Chrome but not working in Safari. So it can be related browser. It's interesting it works properly in PC Chrome without "!important".

Note that I'm only adding below styles to ion-content in side menu

.my-left-side-menu {
background: #f4f4f4 url("/img/bg.png") no-repeat center bottom !important;
background-size: 275px !important;
}

[mjason3]

any updates on this? in Safari, the area below the side menu is always white

[ajoslin]

Could you try this CSS?

.scroll {
 z-index: 1;
} 

[mjason3]

@ajoslin thanks for quick reply. it does not work.

[mjason3]

@ajoslin you might have a typo. i changed to .scroll-content and it works well.

[ajoslin]

Great!

[fatihsever]

Hi,

.scroll-content{
    z-index: 1;
}

does not work for me. I've created a codepen. Don't know what I'm doing wrong? Could you check my code please. Thanks.

http://codepen.io/fatihsever/pen/flsCI

[fatihsever]

Could you help me please. I'm developing an app for World Cup 2014 using Ionic. There is no enough time. I can't find solution for this problem. I tried something but I cannot solve.

[ajoslin]

@fatihsever,

Try z-index: 10 !important; on your scroll content.

Not sure why this is necessary, but it does fix the problem in Safari.

[fatihsever]

@ajoslin I tried this but not fixed. I've updated codepen http://codepen.io/fatihsever/pen/flsCI
You can see here. I tried with ipad retina and mac osx safari.

[ajoslin]

You made a mistake; you have = in your CSS for z-index instead of :.
Put a colon and it will work.

On Mon, May 26, 2014 at 10:24 AM, fatihsever [email protected]:

@ajoslin https://github.com/ajoslin I tried this but not fixed. I've
updated codepen http://codepen.io/fatihsever/pen/flsCI
You can see here. I tried with ipad retina and mac osx safari.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/1408#issuecomment-44202279
.

[fatihsever]

Ahhh I'm really sorry. Yes it works! :) Thank you so much.

[mlynch]

Is this something we should push a fix for @ajoslin?

On Mon, May 26, 2014 at 12:00 PM, fatihsever [email protected]:

Ahhh I'm really sorry. Yes it works! :) Thank you so much.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/1408#issuecomment-44204594
.

[ajoslin]

Yes, I'll push it tomorrow with a couple other things once we narrow it down (and make sure z-index is the right fix).

On Mon, May 26, 2014 at 2:13 PM, Max Lynch [email protected] wrote:

Is this something we should push a fix for @ajoslin?

On Mon, May 26, 2014 at 12:00 PM, fatihsever [email protected]:

Ahhh I'm really sorry. Yes it works! :) Thank you so much.

—
Reply to this email directly or view it on GitHub<
https://github.com/driftyco/ionic/issues/1408#issuecomment-44204594>
.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/1408#issuecomment-44215407
.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.