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

时间 2019-11-16

标签 ios box shadow 诡异 bug 修复栏目 iOS 繁體版

原文原文链接

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

这几天老大告诉我要作一个用户的引导页，引导页大体的效果像是这样子：ios

我也用过不少APP，不少APP其实这个引导页可视区域都是用图片代替的，可是我认为使用图片的话，当引导页消失的时候，用户会发现这和本身在引导页看到的不一致，我认为这是一种很差的用户体验，所以我不想用图片来代替！！！web

因而灵光一现使用box-shadow来作，由于box-shadow的第四个值就是阴影的拓展尺寸，我把这个设置为很是大，这样就很适合做为黑色的蒙层部分，想一想都感受本身是如此的机智。浏览器

box-shadow: 0 0 0 9999999px rgba(0,0,0,.8)
复制代码

当我兴致勃勃写了一连串的引导页的时候，满心欢喜的觉得能够交差了，而后使用了iphone测试了一下，而后就发现了问题，整个引导页蒙层的黑色部分消失了，个人引导页瞬间成了这样子。bash

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

看到这里，一顿操做，先把浏览器前缀加上，-webkit-box-shadow来一发，不行，那就-webkit-appearance试一试，居然仍是不行iphone

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

要不试试将这个值设置小一点试一下，对呀，因而我作了一个简单的demo，以下：spa

<!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）scala

当尺寸小于等于这个值的时候是显示正常的，大于这个值是不能显示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

另外，若是有更好的解决方法请告诉我。

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