Как стать автором
Обновить

Баг с box-shadow в Опере

Время на прочтение1 мин
Количество просмотров3.3K
Обнаружил в Опере неприятный баг, связанный с интерпретацией свойства box-shadow. В случае, если это свойство назначено элементу с псевдоклассом :hover, при наведении курсора тень вокруг него отображается некорректно. Поиск решения в сети результатов не принёс и его пришлось находить экспериментальным путём.

Было установлено, что проблема решается присвоением аналогичной тени для исходного элемента с теми же размерами, что и для element:hover. В моём случае эта тень была бы лишней и я просто сделал её прозрачной.

image

Описанная проблема была зафиксирована в версиях 10.54 и 10.60 для Мак ОС. Выше проиллюстрировано, как при наведении курсора Опера отображает блоки со следующими свойствами:

/* верхний блок */
div.first:hover {
box-shadow: 0 2px 10px #5f5
}
/* нижний блок */
div.second {
box-shadow: 0 2px 10px rgba(0,0,0,0)
}
div.second:hover {
box-shadow: 0 2px 10px #5f5
}


Надеюсь, кому-то этот маленький хинт может быть полезным. А может даже разработчики браузера, прочитав этот топик, исправят это мелкое досадное недоразумение.
Теги:
Хабы:
Всего голосов 25: ↑20 и ↓5+15
Комментарии15

Публикации

Истории

Ближайшие события

27 августа – 7 октября
Премия digital-кейсов «Проксима»
МоскваОнлайн
14 сентября
Конференция Practical ML Conf
МоскваОнлайн
19 сентября
CDI Conf 2024
Москва
20 – 22 сентября
BCI Hack Moscow
Москва
24 сентября
Конференция Fin.Bot 2024
МоскваОнлайн
25 сентября
Конференция Yandex Scale 2024
МоскваОнлайн
28 – 29 сентября
Конференция E-CODE
МоскваОнлайн
28 сентября – 5 октября
О! Хакатон
Онлайн
30 сентября – 1 октября
Конференция фронтенд-разработчиков FrontendConf 2024
МоскваОнлайн
3 – 18 октября
Kokoc Hackathon 2024
Онлайн