Почему дочерний блок не полностью перекрывает родителя при скругленных краях border-radius?

Question

[LetItCode]

Пример бага

codepen.io/letitcode/pen/jrvwNz

Comments

[LetItCode]

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

Answer 1

[Сергей Горячев]

Да не баг это, а особенность реализации.
А точней, особенность рендеринга в браузерах.
Не победить такое.

Answer 2

[Олег]

хз.
Мозила нормально показывает

Answer 3

[dom1n1k]

Ну, кстати, в ФФ полностью - я вначале вообще не понял, что я должен увидеть, потому что был чисто-белый экран.
В Хроме есть окантовка, да. Это через антиалиасинг просвечивается. Нормальное поведение.

Comments

[LetItCode]

Может можно отключить?

[dom1n1k]

Даже если и можно, то зачем? Зубцы же будут по всему краю.
В примере их не будет, потоум что белый блок на белом фоне. Но если цвета разные, вылезет капитально.

[LetItCode]

FF 49.0.1 Mac OS эффект такой же, кстати. Пока думаю использовать меньший радиус для подложки. Прикладной характер: внизу карточки скругленной скругленные табы и все это на контрастном фоне. Подложка карты собственно и проступает.

Answer 4

[Андрей Верх]

Можно задать дочерним меньший радиус, чтоб компенсировать разницу

Comments

[LetItCode]

Нет у дочерних радиуса в задаче, округление идет от оверфлоу родителя.