Ionic in development Box-shadow display problems in iOS

Originally is a simple development in the demand, is similar to user navigation, in addition to the key parts, other places are covered by the black transparent layer, in order to project secrecy, I still use a person to do the case to express my meaning:

Http://www.zhangxinxu.com/study/201603/overlay-cover-refer-to.html

I initially found that using Box-shadow is super easy to use, first make a circle, then do a positioning, and then directly set box-shadow:0 0 0 1997px Rgba (0,0,0,0.6); This 1997 I was also set up, hit a bag on the Android run on the leverage drops! But did not expect to iOS, incredibly completely no effect, what-webkit-box-shadow,-webkit-appearance:none;

Even more strange is this box-shadow in the simulator run good, but to the real machine above the test but does not work, just let a person collapse, thanks to a colleague found in Box-shadow fourth value spread above, when set too big, Safari actually render there is a problem, He's a pixel-to-pixel adjustment, and finally found the threshold value of 1008px, when I excitedly changed to box-shadow:0 0 0 1008px Rgba (0,0,0,0.6), the test ran over to me that the iphone 6 Plus or not! Do I have to say 6 Plus for each pixel again? What if 8 plus,9 plus in the future? I can only go to the other,/(ㄒoㄒ)/~~

As a result, I thought of one of the stupidest ways! Up and down four div attack this skeleton circle, and then set the semi-transparent background image for this circle, so that you can make the final effect.

Originally this can be done, but tireless colleagues and throw over a link, is the above Xin big God that, I found that there is such a mysterious way in the world, in short, the first to make a positioning of the hollow circle, and then set his border, that is, those transparent gray fast, Are the border! of the hollowed-out circle object But this only for the rectangle, how to make the fillet div can also achieve this effect, pseudo-elements!

As long as the hollow circle object to add a rounded pseudo-element, also through the way of border set out his boundaries, to ensure that the gap between the fill rectangle and the middle of the circle, the perfect solution to the problem!

. Cover:: Before{Content:‘‘;Width:100%;Height:100%;Border-radius50%; border: 400 px solid  #000; position: absolute; left: -400 PX; top: -400 PX; box-shadow: Inset 0 0 5px 2px Rgba (0,0,0,.75); }  

The displacement of the left and top is related to the border-width of the set, the actual purpose is to the circle pseudo-class can be in the middle of the skeleton object.

So who can finally tell me why the problem of Box-shadow rendering in iOS can be solved?

Ionic in development Box-shadow display problems in iOS