Let’s start with the environment. I tested two IOS phones, iPhone 8 IOS 11.4.1 and iPhone 6s Plus IOS 11.4.1, and both had this weird bug.

These days the boss told me to make a user guide page, the guide page roughly effect like this:

I also made a lot of APP, a lot of the APP actually this guide pages are using pictures instead of viewing area, but I think using images, when the guide page disappear, users will find it and see himself in the guide page, I think this is a bad user experience, so I don’t want to use images to replace!!!!!!

I decided to use box-shadow because the fourth value of box-shadow is the extension size of the shadow. I set this value to very large, which makes it a good fit for the black layer.

Box-shadow: 0 0 0 9999999px rgba(0,0,0,.8)Copy the code

When I excitedly wrote a series of guide pages, I happily thought I could deliver them. Then I used the iPhone to test them and found the problem. The black part of the entire guide page disappeared, leaving my guide page looking like this.

Nani… That is, box-shadow does not work.

-webkit-box-shadow = -webkit-box-shadow = -webkit-appearance = -webkit-box-shadow = -webkit-box-shadow

On Android, it is normal. It should be the problem on ios, but it is wrong. Box-shadow is used in many places, so it should not be wrong.

How about trying to set this value to a smaller value? Yeah, so I made a simple demo like this:

<! DOCTYPE html> <html lang="zh-cn"> <head> <title>CSS border-shadow attribute </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>
Copy the code

So I kept trying to change the dimensions of box-shadow 10px, 100px, 1000px, 10000px, 2000px….. So after a bit of fiddling, I finally settled on 2039px, which means 2039px (2039.98px to be exact).

If the size is smaller than or equal to this value, box-shadow will be displayed normally. If the size is larger than this value, box-shadow will not be displayed as follows:

At this time, I help my imaginary glasses, there is only one truth

Just as I was about to make a conclusion, I thought I took a closer look at the attributes and I thought border-radius was still weird, after all, you should try to minimize the variables to make a conclusion

I tried adding 10px rounded corners at this point, but the whole page went white again, Nani

So I reduced the size by 10px and found that the display was normal at this time. Wc, 2044px, is it related to this

I tried to change the fillet value of one of them as follows:

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

According to the normal

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

Don’t show

 box-shadow: 0px 0px 0px 2039px # 000;Border-radius: 6px 6px 5.9999px 6px;Copy the code

It’s fine, Nani. Oh, my God, you can fix it like this. I tried to change the size to a crazy 9999px, normal.

Heart tired, so I became a test engineer all afternoon, ios bugs really tired.

Finally, the conclusion is:

When setting the border-radius and box-shadow elements at the same time: If the rounded corner values are the same, make sure that the sum of the two values does not exceed 2044px. If it does, modify one of the rounded corners slightly, such as 5.999px

In addition, please let me know if there is a better solution.

The last is an advertisement, recently opened a new technology sharing public number, do not know how long it can last, welcome everyone to pay attention to 👇