on ios walkthrough is transparent

[hagai26]

sample code here:
https://github.com/hagai26/ng-walkthrough-ionic-example
run on ios device using:
ionic run --device

On browser (ionic serve) it looks great (dark). But on ios device it only show the text without the dark color background.

[souly1]

Hey Hagai, ran the code on an IOS Simulator (got Mac, don't have IOS device to install to though),
so I won't be able to help too much here at the moment, just mention that in simulator it's ok...

[hagai26]

I tried the simulator and it worked for me too.
Moreover, I found an iPad which it worked fine on it (different version maybe).
I will debug this issue in couple of weeks (will borrow an iPad for debugging)

[TonatiuhHorta]

I have the same problem on ios9 with Ionic, and found that changing the ".walkthrough-hole" box-shadow css it works again, but if i set the blur on less than 3px or the distance on 0px it fails again, i hope this can help you.

This are the change on the css class.

.walkthrough-hole {
position: absolute;
-moz-box-shadow: 1px 1px 3px 1997px rgba(0, 0, 0, .8);
-webkit-box-shadow: 1px 1px 3px 1997px rgba(0, 0, 0, .8);
box-shadow: 1px 1px 3px 1997px rgba(0, 0, 0, .8);
-webkit-appearance: none;
}

[Elpetro]

Great workaround TonatiuhHorta, the backdrop appears on my IOS9, thanks !
However the text is not displayed

[tpanhorst]

To get this to work on iOS 8.3, I had to add a border-radius and change the box-shadow parameters a bit. This is due to a bug on that version of iOS with box-shadow. You can find the discussion for this bug here: https://discussions.apple.com/thread/6647986?start=15&tstart=0.

.walkthrough-hole {
    position: absolute;
    -moz-box-shadow: 0 0 3px 1997px rgba(0, 0, 0, .8);
    -webkit-box-shadow: 0 0 3px 1997px rgba(0, 0, 0, .8);
    box-shadow: 0 0 3px 1997px rgba(0, 0, 0, .8);
    border-radius:1px;
    -webkit-appearance: none;
}