Скруглённая картинка при наведении. Как пофиксить баг в хроме?

Question

[z_u_l]

При наведении края бордеров становятся квадратными, потом закругляются. В мозилле всё ок. Как пофиксить этот баг?

Ссылка на пример

Answer 1

[Павел Чесноков]

И в Сафари этот баг присутствует. Решаеться перемещением объектов местами.

div {
   border-radius: 20px;
   z-index: 3;
}
img {
  /*border-radius: 10px;*/ <--- Это лишнее
  z-index: 2;
}

Comments

[z_u_l]

Павел Чесноков Здравствуйте!
Сделал по вашему примеру, но при наведении всё равно квадраты есть

Ссылка на пример

[Павел Чесноков]

А у меня прекрасно работает ваш пример, и в Хроме, и в Сафари и в ФаирФоксе.

[z_u_l]

Павел Чесноков А у меня квадратики появляются.

Решил проблему, добавив блоку с overflow свойство:
-webkit-mask-image: -webkit-radial-gradient(white, black);