Исправьте странную ошибку коробки-тень под iOS

внешний интерфейс Android iOS
Исправьте странную ошибку коробки-тень под iOS

Давайте сначала поговорим об окружающей среде, я протестировал два мобильных телефона IOS,iphone 8 ios 11.4.1а такжеiphone 6s plus ios 11.4.1, есть такой странный баг.

В последние несколько дней начальник сказал мне сделать страницу руководства пользователя.Общий эффект страницы руководства таков:

Я также использовал много приложений.Во ​​многих приложениях видимая область страницы руководства заменена изображениями, но я думаю, что если вы используете изображения, когда страница руководства исчезает, пользователи обнаружат, что это несовместимо с то, что они видят на странице руководства.плохой пользовательский опыт, поэтому я не хочу использовать картинки! ! !

Поэтому я использовал box-shadow, чтобы сделать это мгновенно, потому что box-shadowчетвертое значениерасширенный размер тени, я установил его наОчень большой, который очень подходит в качестве черной многослойной части, и он кажется таким остроумным, когда я думаю об этом.

box-shadow: 0 0 0 9999999px rgba(0,0,0,.8)

Когда я с большим энтузиазмом писал серию страниц руководства, я думал, что смогу пересечь черту с радостью.Потом я протестировал его с iphone, и тогда я нашел проблему.Черная часть маски на всей странице руководства исчезла , и моя путеводная страница Она стала такой в ​​одно мгновение.

нани. . . . то естьbox-shadow не вступает в силу.

Видя это, одна операция, сначала добавьте префикс браузера,-webkit-box-shadowДавай, нет, тогда-webkit-appearanceПопробуй, все равно не работает

Подумав об этом, нет, это нормально на Android, это должно быть проблемой под ios, но нет, box-shadow используется в нужном месте, проблем быть не должно, глядя на код здесь, я могу' Не могу не впасть в это Подумайте глубоко. . .

Почему бы вам не попробовать установить это значение немного меньше, да, поэтому я сделал простую демонстрацию следующим образом:

<!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 все еще странный.В конце концов, мы должны попытаться максимально уменьшить переменные, чтобы сделать выводы.

В этот раз я попытался добавить закругленные углы 10 пикселей, но в этот раз вся страница снова белая, Нани.

Итак, я уменьшил размер на 10 пикселей и обнаружил, что дисплей в это время нормальный, wc, 2044 пикселей, это связано с этим?

Я попытался изменить значение закругленного угла одного из них следующим образом:

 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;

Дисплей нормальный, Нани, что за хрень, можно так починить. Я попытался изменить размер до сводящих с ума 9999 пикселей, и это нормально.

Я устал, поэтому я стал инженером-испытателем на полдня.Баги ios действительно утомляют.

Наконец, вывод такой:

Когда элемент одновременно устанавливает border-radius и box-shadow: если значение закругленных углов одинаковое, убедитесь, что сумма этих двух значений не превышает 2044 пикселей, если оно должно превышать, пожалуйста, немного изменить значение одного из закругленных углов, например 5,999 пикселей

Кроме того, если есть лучшее решение, пожалуйста, дайте мне знать.

Последний рекламный пост.Недавно открылся новый публичный аккаунт для обмена технологиями.Не знаю сколько он продлится.Приглашаю всех обратить внимание👇

Категории