Ionic开发中box-shadow在ios中显示有问题

Posted 2020-08-28 灰灰不会飞

本来是开发中一个简单的需求，就是类似用户导航一样，除了重点部分，其他地方都被黑色透明层遮住，为了项目保密，我还是用一个别人做的列子来表达下我的意思：

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

我最初发现用box-shadow简直是超级好用，先做一个圆圈，再做个定位，然后直接设置box-shadow: 0 0 0 1997px rgba(0,0,0,0.6);这个1997我也是随手设置的，打个包在安卓上跑的杠杠滴!但是没想到到了ios上，居然完全没效果，什么-webkit-box-shadow,-webkit-appearance:none;统统没有用！

更奇怪的是这个box-shadow在模拟器上跑的好好的，但是到了真机上面测试却不起作用，简直让人崩溃，幸亏有个同事发现玄机在box-shadow的第四个值spread上面，当设置太大的时候，safari居然渲染有问题，他一个像素一个像素的调整，最终发现1008px这个界限值，当我兴冲冲改成box-shadow: 0 0 0 1008px rgba(0,0,0,0.6)的时候，测试跑过来跟我说iphone 6 plus上还是不行！难道说我又要一个个像素调6 plus？万一以后又出什么8 plus，9 plus怎么办？想来我只能另辟蹊径了，/(ㄒoㄒ)/~~

 

结果我想了一个最笨的方法！上下左右四个div夹击这个镂空圆，然后针对这个圆设置半透明背景图，这样就可以做出最终效果。

本来这样就可以收工了，但是孜孜不倦的同事又扔过来一个链接，就是上面鑫大神那个，我才发现原来世上还有如此高深莫测的办法，简单来说，先对镂空圆做一个定位，然后设置他的border，也就是说那些透明灰色快，都是镂空圆对象的border！但是这个只能针对矩形，如何让圆角div也能实现这个效果，伪元素!

只要给镂空圆对象添加一个圆角伪元素，也通过border的方式设置出他的边界，保证能填充矩形和圆形中间的间隙，就完美的解决该问题了！

.cover::before {
    content: ‘‘;
    width: 100%; height:100%;
    border-radius: 50%;
    border: 400px solid #000;
    position: absolute;
    left: -400px; top: -400px;
    box-shadow: inset 0 0 5px 2px rgba(0,0,0,.75);
}

其中left和top的位移是跟设置的border-width相关的，实际目的都是为了这个圆形伪类能够在镂空对象的正中间。

 

话说谁能最后告诉我为什么box-shadow在ios下渲染的问题怎么才能解决呢？