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

CSS*

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

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

Описанная проблема была зафиксирована в версиях 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

}

Надеюсь, кому-то этот маленький хинт может быть полезным. А может даже разработчики браузера, прочитав этот топик, исправят это мелкое досадное недоразумение.

+15

24 июня 2010, 03:43

onthefly 51,9

комментарии (15)

SKYnv 24 июня 2010, 05:52 #

а зарепортить поленился?

или на форуме оперы

Steward 24 июня 2010, 10:04 # ↑

да Pepelsbey здесь объявится — он сам зарепортит :) — так быстрее будет

wixus 24 июня 2010, 10:18 # ↑

Как по-русски =))

Dlussky 24 июня 2010, 11:04 # ↑

Я репортил сей баг еще во времена беты 10.5, так что слать дубликаты не стоит)

*по теме: В моем случае добавление тени вешалось на :focus, и невидимую тень пришлось делать в два раза больше по радиусу, чтобы не возникало неприятных артефактов при переходе фокуса на другой элемент.

SamDark 24 июня 2010, 16:00 # ↑

А нам откуда знать, что это дубликат?

fatal 14 октября 2010, 02:34 # ↑

Дубликаты иногда слать всё же стоит, чтобы привлечь внимание разработчиков к проблеме или повысить её приоритет (проблема с 20 дубликатами не может иметь низкий приоритет).

onthefly 24 июня 2010, 15:30 # ↑

Цель этого топика — прежде всего сэкономить время верстальщикам, столкнувшимся с таким поведением браузера. Мне не удалось найти в интернете ни описания, ни методов решения этой проблемы.

vflash 24 июня 2010, 10:58 #

также после клика на кнопку тень по hover перестает корректно работать. вечная беда Оперы, забывает подтереть или дорисовать )

pepelsbey 24 июня 2010, 11:28 #

А можно добавить в текст топика полный пример: html + css? Ну, чтобы было совсем понятно.

Dlussky 24 июня 2010, 11:46 # ↑

input[type='text']{  
  border                          : 1px solid #999;
}
input[type='text']:focus {  
  box-shadow                      : 0 0 3px #777;
  -webkit-box-shadow              : 0 0 3px #777;
  -moz-box-shadow                 : 0 0 3px #777;
  border                          : 1px solid #333;
}

onthefly 24 июня 2010, 15:33 # ↑

<div>text</div>

div:hover{
box-shadow: 0 2px 10px #5f5
}

crwin 24 июня 2010, 11:28 #

у оперы вообще достаточно багов касательно box-shadow, в частности когда данное свойство применяется к инпутам.

Newton 24 июня 2010, 12:38 # ↑

в принципе, можно короче: у оперы вообще достаточно багов

ertaquo 24 июня 2010, 20:22 # ↑

У меня в опере с тенями проблемы были при прокрутке страниц. Просто мышкой прокручиваешь потихоньку, и тени исчезают или косячатся… Решалось прокруткой через PgUp/PgDown

lol2Fast4U 24 июня 2010, 19:45 #

не только курсора. полупрозрачные tooltip'ы в tipsy тоже оставляют белый след.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.