Border-radius in Safari
В Safari столкнулся с неаккуратным рендерингом элемента, если ему задан border-radius и фоновый цвет. Увидеть проблему и её решение можно на тестовой странице.
Решение
1. Фоновый цвет у блока убрать
2. Внутрь блока добавить обертку
3. Обертке задать фоновый цвет
4. Обёртке задать border-radius, меньше на толщину бордера, чем у внешнего блока
<div class="button"><div class="button-inner">Кнопка</div></div>
.button
{
border: 5px solid #000;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
-khtml-border-radius: 30px;
}
.button-inner
{
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-khtml-border-radius: 25px;
background: #fff;
}Update
Между фоном и бордером появляются дырки, если border-radius у обоих блоков одинаковый и:
1. Внутреннему блоку задана большая высота (height)
2. Его содержимое имеет большой font-size
3. Его содержимое представлено многострочным текстовым узлом
Внутреннему блоку нужно задавать border-radius с меньшим значением, чем у внешнего блока, потому что при border-radius:30px внешняя сторона бордера (толщина которого равна 5px) скруглена с радиусом 30px, а внутренняя сторона скруглена с радиусом 25px, меньше на толщину бордера.
Спасибо Александру Ермолаеву за багрепорт, а Степану Резникову за допиливание решения и объяснение про кривизну бордера.
Комментарии
7 комментариев к “Border-radius in Safari”
Написать комментарий.
Интересно, что этот же метод улучшает качество отображения в FF (3.6, Mac). Скругления какие-то менее зазубренные становятся (proofpic)
ОтветитьВ Хроме это тоже помогает. Но антиальяса не прибавляет.
ОтветитьТ.е. это проблема не Safari, а вебкита, видимо.
Ответить@Мохов Олег, симпатично, но не семантично, да?
Ответить@webkostin, а в Хроме тоже белые пиксели вылезают?
Ответить@Вадим Макишвили, ни в коем случае
Вообще со скруглёнными уголками гемороя пока замечаю больше чем пользы и непонятно, это из-за того, что они ещё в разработке? Например, если для img тега поставить border-radius, то картинка не обрезается, а скругления под неё заползают (я здесь об этом писал http://olmokhov.livejournal.com/43025.html).
Ответить@Вадим Макишвили, дак вы и сами можете убедиться (есть же бета под Маком). Ответ на вопрос webkostin’у: да! =)
Ответить