При inset box-shadow + border-radius — становится виден край элемента. Это баг?

Question

[Китана]

При использовании Inset box-shadow вместе с border-radius становится виден край элемента, т.е. выглядит как обводка или граница... Вот фиддл
Это баг? Есть ли workaround?

Браузеры
chrome 53, firefox 49 на ubuntu 16

Comments

[Ivanq]

Какой браузер? Можно скриншот?

[Китана]

Ivanq: chrome 53, firefox 49 на ubuntu 16. скриншот вставила

Answer 1

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

border-radius во многих ситуациях рендерится с подобным "багом". Особенно это видно на контрастных цветах.
Тут только смириться...не возвращаться же к картинкам для скруглений...

В вашем случае, всё довольно просто решается добавлением ещё одного дива.

Comments

[Китана]

а можете подробней объяснить про добавление еще одного дива?

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

Китана: Вроде же очевидно: первый див с border-radius и padding, второй простой див. Без всяких box-shadow.

[Китана]

Андрей Верх: к сожалению не могу выбрать ваш ответ решением тк все равно не поняла как сделать ( Не понимаю как здесь поможет втрой див. Если в него вложить, то край все равно остается заметным

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

Китана: https://jsfiddle.net/9kvxavoq/1/

[Китана]

Андрей Верх: да вы правы, это очевидно, хоть долго доходило. Но что если нельзя вложить элемент? Я этот баг заметила когда хотела сделать кастомный скроллбар https://jsfiddle.net/Kitana/9ao82v79/

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

Китана: 1. Ваш скоролл только для webkit
2. Можно использовать border:4px solid #fff вместо box-shadow

[Китана]

Андрей Верх: ok, спасибо

Answer 2

[iBird Rose]

это скорее не баг, а поведение box-shadow. тобишь эта обводка - это выглядывает background самого блока.

Comments

[Китана]

так странное поведение, ведь без бордер-радиуса не выглядывает...