0

Разрабатываю небольшой сайт, тестировал только в Chrome (полагал, что браузеры уже современные и рендерят всё одинаково хорошо).

Сейчас поставил Firefox и приуныл: появилась проблема с отображением :hover {box-shadow: inset. Заключается она в том, что тень отображается или только с одной стороны, или, чаще всего, "квадратной" (будто это не тень, а полупрозрачный border внутри контейнера). При применении transition: box-shadow всё вообще мерцает и отображается очень странно.

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

Пример кода, на котором можно уловить баг (но сложнее, чем на полном сайте, не знаю, почему):

.accent1:hover {
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); /* DOESN'T WORK AT ALL */
}
.test {
    display: block;
    width: 200px;
    height: 200px;
    background: rgb(0, 150, 150);
    color: #fff;
    font-size: 36px;
    text-decoration: none;
    transition: box-shadow .5s;
}
<a href="#" class="accent1 test">
  <div>
    <div>
      <span>Lorem</span>
      <span>ipsum</span>
    </div>
  </div>
</a>

5
  • прежде всего, использовать -moz-box-shadow уже нет нужды, ибо, согласно caniuse.com,браузеры поддерживают это свойство без вендорных префиксов. возможно, из-за этого у вас свойство дублируется и браузер не знат, как корректно обработать. по факту, у меня на Firefox 46.0.1 проблема не наблюдается. Возможно, вам стоит обновить браузер
    – lexxl
    18 мая 2016 в 9:14
  • @lexxl Нет, наличие вендорного префикса никак не влияет на проблему, Firefox вообще игнорирует его (префикс). Firefox установил два часа назад, версия 46.0.1, без плагинов и с дефолтными настройками.
    – Urffly
    18 мая 2016 в 9:23
  • вижу, что игнорирует. больше придраться не к чему было, вот и решил, чтоб стоит попробовать его удалить. и, кстати, оффтопик: есть мнение, что блочные элементы не следует вкладывать в строчные
    – lexxl
    18 мая 2016 в 9:27
  • @lexxl Знаю, что не следует, но в любом случае придётся извращаться: либо энкор тянуть на весь контейнер, либо на JS обработку вешать, либо вот так. Так хотя бы выглядит логично. Возможно, эта проблема лишь на рабочем компьютере, как-то связана с железом или системой. Но в любом случае Chrome работает нормально ведь.
    – Urffly
    18 мая 2016 в 9:33
  • @Urffly странно, но у меня что в лисе что в хроме, все одинаково. Ничего не прыгает 18 мая 2016 в 12:46

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.