CSS gradient not showing on iOS sidemenu

1

I added a gradient background to the sidemenu using Sass. Here is the (relevant) translated css:

.platform-ios ion-side-menu.menu {
    background:#174790;
    background:-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #2e599b), color-stop(100%, #123873));
    background:-webkit-radial-gradient(center, ellipse cover, #2e599b 0%, #123873 100%);
}

The gradient shows correctly on my iPhone 5 running iOS 8.1.2. However, it shows a white background when testing on an iPad running iOS 7.1.2. I am using actual devices to test and ionic run ios.

If I inspect element on the iPad I can see that platform-ios is correctly added to the body. If I remove the gradient backgrounds it shows the background color #174790.

Update: I placed the code in a codepen and pulled it up in safari and it’s working there: http://codepen.io/anon/pen/razOJo

Update 2: I removed all of the Ionic css except for the css directly related to the menu class and it’s showing. Really confused on why, still trying to track down what is going on.

2

Well, I fixed this. I’m not really sure where the conflict is but changing it to the below makes it work on both the iPad and iPhone. I tried putting it on only the .view but it broke on the iPhone, so I added .menu back and it works on both now.

.platform-ios .menu, 
.platform-ios .view {
    background: #174790;
    background: -moz-radial-gradient(center, ellipse cover, #2e599b 0%, #123873 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #2e599b), color-stop(100%, #123873));
    background: -webkit-radial-gradient(center, ellipse cover, #2e599b 0%, #123873 100%);
    background: -o-radial-gradient(center, ellipse cover, #2e599b 0%, #123873 100%);
    background: -ms-radial-gradient(center, ellipse cover, #2e599b 0%, #123873 100%);
    background: radial-gradient(ellipse at center, #2e599b 0%, #123873 100%);
}

Maybe it will help someone one day, or maybe it’s a strange bug that only I had the pleasure of running into.