chrome css: border-radius не отображается

Question

У меня проблема с граничным радиусом на Chrome (последняя сборка). У меня есть радиус границы: 10 пикселей; на ползунке с этой страницы: http://next.lab501.ro/

В Firefox и IE9 все работает, но не в Chrome, и я не могу понять, почему, потому что у меня есть другие элементы с радиусом границы, которые отлично работают в Chrome.

Answer 1

Я проверил использование Safari «Web Inspector», и ваш CSS определенно успешно применяется к вашему контейнеру.

I думаю проблема связана с содержащимся в ней содержимым элемента с граничным радиусом «разрыва» над закругленными углами контейнера. См. this article для получения дополнительной информации. Я считаю, что проблема была сначала правильно сообщена Richard Rutter.

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

Я бы попытался округлить углы содержащихся элементов, которые, кажется, переполнены. Это, похоже, работает для меня на этой странице:

dl.slidedeck { 
    border-radius: 10px; 
} 

div.sd-node.sd-node-caption { 
    border-radius: 10px; 
}