Ошибка рендеринга CSS3 в Firefox

Question

Коробчатая тень неправильно отображается в firefox (наблюдалась на v49).

Css:

.block { 
    width: 90px; 
    height: 90px; 
    box-shadow: 0 0 0 1px #0084A3; 
    border-radius: 100%; 
} 

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

Хром и Safari обрабатывают его хорошо.

Буду признателен за любые полезные идеи.

Answer 1

Пожалуйста, используйте box-shadow: inset 0 0 0 1px #0084A3;, он дает тот же результат как в браузерах Firefox, так и в Chrome.

Answer 2

Попробуйте это -moz-box-shadow: 0 0 0 1px #0084A3; для Firefox;

Answer 3

Сан правильно, но просто более подробно ..

Существует 2 типа тени 1. Внутренняя (вставка) 2. Внешняя (по умолчанию)

так в CSS3, по умолчанию это принимая внешнюю тень, если вы не указали свойство вставки.

врезка

Если не указано (по умолчанию), то тень считается падающей тенью (как будто коробка была приподнята над содержанием).

Наличие ключевого слова вставки изменяет тень на единицу внутри кадра (как если бы содержимое было нажато внутри поля). Вложенные тени рисуются внутри границы (даже прозрачные), над фоном, но ниже содержания.

проверить это link более подробно