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

系统管理员 2022-03-15 03:40 348阅读 1赞

先说环境，我测试了两台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 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;
    复制代码