Как исправить баг в гуглхроме при использовании border-radius?

Question

[Алексей Чумаченко]

Добрый день. подскажите пожалуйста как исправить баг в хроме.
ссылка на код https://jsfiddle.net/uj4gdqn2/
При наведение на кнопку "главная страница" несколько раз, в правом и нижнем углу данной кнопки появляется белые точки. во всех остальных браузерах работает нормально. если отключить border-radius то проблемы нет. Подскажите как исправить данную проблему.? может проблема в коде? кто силен в верстке пожалуйста помогите с решением проблемки)

Comments

[Andrew]

у меня ничего не появляется

[Алексей Чумаченко]

Andrew, попробуйте пожалуйста переходить с главной на о нас раз 5 подряд и вы увидите что появляется две маленькие белые точки. на подобие битых пикселей

[Алексей Скляров]

Потому что у вас неимоверно "круто сверстано". Это получается из-за наложения одного слоя на другой, в вашем случае нужно не z-index менять при наведении, а opacity.

[Алексей Чумаченко]

Алексей Скляров, спасибо за ответ

Answer 1

[Екатерина]

Если оставлять текущий вариант верстки, то нужно анимацию background'а перенести с :before и :after на тег. Например, вот так https://jsfiddle.net/ryju4m0L/

Comments

[Алексей Чумаченко]

Большое Вам спасибо за помощь