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

    Обнаружил в Опере неприятный баг, связанный с интерпретацией свойства 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
    }


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

    Похожие публикации

    Комментарии 15
        +5
        да Pepelsbey здесь объявится — он сам зарепортит :) — так быстрее будет
          +1
          Как по-русски =))
          +4
          Я репортил сей баг еще во времена беты 10.5, так что слать дубликаты не стоит)

          *по теме: В моем случае добавление тени вешалось на :focus, и невидимую тень пришлось делать в два раза больше по радиусу, чтобы не возникало неприятных артефактов при переходе фокуса на другой элемент.
            0
            А нам откуда знать, что это дубликат?
              0
              Дубликаты иногда слать всё же стоит, чтобы привлечь внимание разработчиков к проблеме или повысить её приоритет (проблема с 20 дубликатами не может иметь низкий приоритет).
              0
              Цель этого топика — прежде всего сэкономить время верстальщикам, столкнувшимся с таким поведением браузера. Мне не удалось найти в интернете ни описания, ни методов решения этой проблемы.
            • НЛО прилетело и опубликовало эту надпись здесь
                0
                А можно добавить в текст топика полный пример: html + css? Ну, чтобы было совсем понятно.
                  0
                  <input type='text' name='some'>

                  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;
                  }
                  
                    0
                    <div>text</div>

                    div:hover{
                      box-shadow: 0 2px 10px #5f5
                    }
                    +3
                    у оперы вообще достаточно багов касательно box-shadow, в частности когда данное свойство применяется к инпутам.
                      +4
                      в принципе, можно короче: у оперы вообще достаточно багов
                        +1
                        У меня в опере с тенями проблемы были при прокрутке страниц. Просто мышкой прокручиваешь потихоньку, и тени исчезают или косячатся… Решалось прокруткой через PgUp/PgDown
                        0
                        не только курсора. полупрозрачные tooltip'ы в tipsy тоже оставляют белый след.

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

                        Самое читаемое