IOS 下 box-shadow 的诡异 bug 的修复
先说环境，我测试了两台IOS手机，iphone 8 ios 11.4.1 和 iphone 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>
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
另外，如果有更好的解决方法请告诉我。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论