Firefox и Chrome по-разному отображают box-shadow

Я тестировал эффект box-shadow в Chrome и Firefox, и я был удивлен, увидев резкое различие в рендеринге между двумя браузерами. Примечательно, что рендеринг Firefox былмного темнее. Вот два эталонных изображения:

Первое изображение отображается в Chrome 22, а последнее - в Firefox 16, оба работают под Mac OS 10.8.2. Я понятия не имею, почему два изображения отображаются так по-разному. Вот сама тень блока, одинаковая для обоих браузеров:

box-shadow: 0px 1px 3px rgba(0,0,0,0.3), inset 0px 4px 2px -2px rgba(255,255,255,0.7), inset 0px -3px 1px -2px rgba(0,0,0,0.3), inset 0px -20px 200px -100px rgba(0,0,0,0.5);

Для живого демо, вы можете увидетьВот, Наведите курсор мыши на поле, чтобы получить эффект.

Есть ли способ, как я могу исправить эту радикальную разницу в рендеринге?

 user189460625 февр. 2014 г., 23:53
Я предполагаю, что это компонент, который разрабатывает браузер. Например, всплывающие окна с предупреждениями выглядят очень по-разному в разных браузерах. Если вы хотите выглядеть так же, я думаю, вы должны нарисовать и закодировать это самостоятельно.
 BoltClock♦21 окт. 2012 г., 20:03
Это было проблемой в течение достаточно долгого времени. Я до сих пор не знаю, что вызывает это:stackoverflow.com/questions/11167516/...

Ответы на вопрос(5)

 Radim Köhler11 дек. 2013 г., 09:20
Пожалуйста, попробуйте прочитать этоstackoverflow.com/help/deleted-answers, чтобы получить больше понимания, какне ответ. А именно: «Ответы, которые принципиально не отвечают на вопрос»:чуть больше, чем ссылка на внешний сайт

что Chrome и Firefox используют разные рендеры html. Я думаю, что резкое различие вызвано цветом раги, вместо этого попробуйте потушить тень.

который будет использовать другой стиль. Вам придется поиграть с этим. Например, я уменьшил размытие, разброс и увеличил непрозрачность последней вставки box-shadow. Так что CSS для.box: зависать должно выглядеть примерно так:

.box:hover {
  box-shadow(0px 1px 3px rgba(0,0,0,0.3), inset 0px 4px 2px -2px rgba(255,255,255,0.7), inset 0px -3px 1px -2px rgba(0,0,0,0.3), inset 0px -20px 200px -100px rgba(0,0,0,0.5));
}

@-moz-document url-prefix() {
.box:hover {
  box-shadow(0px 1px 3px rgba(0,0,0,0.3), inset 0px 4px 2px -2px rgba(255,255,255,0.7), inset 0px -3px 1px -2px rgba(0,0,0,0.3), inset 0px -20px 130px -120px rgba(0,0,0,0.9));
}
}

Для получения дополнительной информации о селекторах и других взломах браузера вы можете посетитьBrowserHacks.com

 thexpand18 дек. 2013 г., 15:18
@xpy Можете привести пример, потому что я вас не понимаю?
 xpy17 дек. 2013 г., 09:28
Я полагаю, что использования префиксов каждого браузера будет достаточно, поэтому нет причин использовать для этого взлом.
 xpy18 дек. 2013 г., 17:25
Я сделал скрипку из примера:jsfiddle.net/pavloschris/hkJkG даже если версия атрибута без префикса, chrome использует префиксный, другие браузеры будут использовать без префикса.
 thexpand25 июл. 2015 г., 10:28
Верный. Тем не менее, более новые версии используютbox-shadow, вместо-webkit-box-shadow если ты пишешьbox-shadow после вендора свойство префикса.

исправленная в Chrome 73 (ожидается в марте 2019 года).

https://www.chromestatus.com/feature/6569666117894144

Исторически интерпретация Blink по радиусу размытия противоречила спецификациям CSS и Canvas2D: тени Blink покрывают примерно половину ожидаемой области (см. Связанную ошибку). С этим изменением сигма размытия по Гауссу теперь рассчитывается как 1/2 радиуса размытия, как указано в спецификации. Теневая реализация Blink теперь соответствует FireFox и Safari.

Примечание: эта ошибка старше, чем разветвление Blink из WebKit. У Safari всегда был другой графический движок.

https://bugs.chromium.org/p/chromium/issues/detail?id=179006

Таким образом, точная формула, чтобы сохранить внешний вид через это изменение
R '= 2 * (0,288675 * R + 0,5)

R' (new)     R (previously)
Chrome 73+   Chrome 72 and below
1.5px        1px
2px          2px
3px          3px
3px          4px
4px          5px
4.5px        6px

R' ≈ 0.7 * R       for R = 7px ... 12px
R' ≈ 0.6 * R       for R = 22px ... ∞
 Filnor09 янв. 2019 г., 09:44
Как указано в приведенном выше комментарии, ваш ответ в основном только две ссылки. Не могли бы вы процитировать наиболее релевантную часть (и) об изменениях, чтобы будущие посетители могли видеть важную информацию еще быстрее?
 j.j.13 мар. 2019 г., 01:21
Добавлены некоторые цитаты в предоставленные ссылки.

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

box-shadow: 0px 1px 3px rgba(0,0,0), 
            inset 0px 4px 2px -2px rgba(255,255,255), 
            inset 0px -3px 1px -2px rgba(0,0,0), 
            inset 0px -20px 200px -100px rgba(0,0,0);

-moz-box-shadow: 0px 1px 3px rgba(0,0,0), 
                 inset 0px 4px 2px -2px rgba(255,255,255), 
                 inset 0px -3px 1px -2px rgba(0,0,0), 
                 inset 0px -20px 200px -100px rgba(0,0,0);

-ms-box-shadow: 0px 1px 3px rgba(0,0,0), 
                inset 0px 4px 2px -2px rgba(255,255,255), 
                inset 0px -3px 1px -2px rgba(0,0,0), 
                inset 0px -20px 200px -100px rgba(0,0,0);

-webki-box-shadow: 0px 1px 3px rgba(0,0,0), 
                   inset 0px 4px 2px -2px rgba(255,255,255), 
                   inset 0px -3px 1px -2px rgba(0,0,0), 
                   inset 0px -20px 200px -100px rgba(0,0,0);

Если проблема не устранена, у вас есть скрипка или ссылка для этого, чтобы я мог проверить правильно

 j.j.08 янв. 2019 г., 03:57
Не используйте префиксы для box-shadow. Он реализован без префиксов в любом браузере с 2011 года, и в Chrome 73 исправлена ошибка рендеринга.

Ваш ответ на вопрос