Статьи

Border Radius и Inset Box Shadow Bug решение!

Февраль 13, 2019

Google Chrome в Windows печально известен ошибкой border-radiusbox-shadow Эта ошибка теперь распространяется на версию Chrome для Mac (версия 10.0.648.127).

Если вы не знакомы с ошибкой, здесь можно быстро решить проблему: при применении радиуса границы к входному элементу вставка box-shadow будет игнорировать border-radius Результат? Вы получаете уродливый жесткий угол, который выходит за ваши границы.

После небольшой скрипки я нашел решение и, возможно, нашел реальную причину этой проблемы. Оказывается, если радиус вашей границы больше, чем высота элемента (с учетом отступов, размера шрифта и т. Д.), Эта визуальная ошибка произойдет.

На самом деле мы столкнулись с этой проблемой здесь, на фестивале дизайна, при поиске. Вот исходный CSS, который мы использовали: 

 input.text, #s {
    float: left;
    width: 163px;
    border: 1px solid #C0C0BA;
    font-size: 85%;
    padding: 4px 15px 4px 30px;
    -webkit-box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.17);
    -moz-box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.17);
    box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.17);
    background: white url(/wp-content/themes/designfestival/images/social-icons/mail.png) no-repeat 7px 4px;
    height: 14px;
    }

input {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    padding: 2px 3px 3px;
    font-family: "Liberation Serif Italic", "Times New Roman", Serif;
    font-style: italic;
    }

Вот скриншот того, как это отображается:

Визуализация ошибки в квадрате увеличена.

Исправление

Изменяя радиус границы inputbox-shadow

Вот готовый CSS с исправлением: 

 input.text, #s {
    float: left;
    width: 163px;
    border: 1px solid #C0C0BA;
    font-size: 85%;
    padding: 4px 15px 4px 30px;
    -webkit-box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.17);
    -moz-box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.17);
    box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.17);
    background: white url(/wp-content/themes/designfestival/images/social-icons/mail.png) no-repeat 7px 4px;
    height: 14px;
    }

input {
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    padding: 2px 3px 3px;
    font-family: "Liberation Serif Italic", "Times New Roman", Serif;
    font-style: italic;
    }

Это должно сделать это. Сталкивались ли вы с этой ошибкой?

43
Share: