IOS下box-shadow的诡异bug的修复

4,624 阅读4分钟

先说环境,我测试了两台IOS手机,iphone 8 ios 11.4.1iphone 6s plus ios 11.4.1,都存在这个诡异的bug。

这几天老大告诉我要做一个用户的引导页,引导页大致的效果像是这样子:

我也用过很多APP,很多APP其实这个引导页可视区域都是用图片代替的,但是我认为使用图片的话,当引导页消失的时候,用户会发现这和自己在引导页看到的不一致,我认为这是一种不好的用户体验,因此我不想用图片来代替!!!

于是灵光一现使用box-shadow来做,因为box-shadow的第四个值就是阴影的拓展尺寸,我把这个设置为非常大,这样就很适合作为黑色的蒙层部分,想想都感觉自己是如此的机智。

box-shadow: 0 0 0 9999999px rgba(0,0,0,.8)

当我兴致勃勃写了一连串的引导页的时候,满心欢喜的以为可以交差了,然后使用了iphone测试了一下,然后就发现了问题,整个引导页蒙层的黑色部分消失了,我的引导页瞬间成了这样子。

纳尼。。。。也就是说 box-shadow不生效

看到这里,一顿操作,先把浏览器前缀加上,-webkit-box-shadow来一发,不行,那就-webkit-appearance试一试,竟然还是不行

思前想后,不对呀,在安卓上都是正常的呀,应该是ios下的问题,但是不对呀,很对地方都用到了box-shadow,不应该出问题,看着这里的代码,我不禁陷入了深深的思考。。。

要不试试将这个值设置小一点试一下,对呀,于是我做了一个简单的demo,如下:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>CSS border-shadow 属性</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no">
</head>
<style>
    #mask{
        width: 200px;
        height: 200px;
        background: #fff;
        box-shadow: 0px 0px 0px 10px #000;
        border-radius: 5px;
    }

</style>
<body>
    <div id="mask">
        hello
    </div>
</body>
</html>

于是我不断尝试修改box-shadow的尺寸10px 、100px 、1000px、10000px、2000px.....(论二分法在现实测试中的应用,哈哈哈哈),于是经过一番折腾,我最终确定了2039px这个边界值,也就是说2039px(准确来说是2039.98px)

当尺寸小于等于这个值的时候是显示正常的,大于这个值是不能显示box-shadow的,如下:

在这个时候,我扶了扶我想象中的眼镜,真相只有一个

就在我准备下结论的时候,我觉得我仔细看看了这些属性,我觉得border-radius还是很诡异,毕竟应该尽量减少变量才能下结论呢

我尝试这个时候增加10px的圆角,可是此时整个页面又白屏了,纳尼

于是我减少了10px的尺寸,发现这时候显示正常了,wc,2044px,难道和这个有关

我尝试修改其中一个的圆角值,如下:

 box-shadow: 0px 0px 0px 2039px #000;
border-radius: 6px 6px 6px 90px;

显示正常

 box-shadow: 0px 0px 0px 2039px #000;
border-radius: 6px 6px 6px 6px;

不显示

 box-shadow: 0px 0px 0px 2039px #000;
border-radius: 6px 6px 5.9999px  6px;

显示正常,纳尼,卧槽,可以这样修复呀。 我尝试将尺寸修改为丧心病狂的9999px,正常。

心累,就这样我成了一下午的测试工程师,ios的bug真累人。

最后,得出结论就是:

元素同时设置border-radius和box-shadow的时候:如果圆角的值一致,请确保这两个值的和不超过2044px,如果一定会超过的话,请微小修改其中一个圆角的值,如5.999px

另外,如果有更好的解决方法请告诉我。

最后是一个广告贴,最近新开了一个分享技术的公众号,不知道能坚持多久,欢迎大家关注👇