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

另外，若是有更好的解決方法請告訴我。

最後是一個廣告貼，最近新開了一個分享技術的公衆號，不知道能堅持多久，歡迎你們關注👇

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。