Firefox и Chrome, похоже, визуализируют коробчатую тень совершенно по-другому

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

ChromeFirefox

Первое изображение отображается в 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);

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

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

Ответы

Ответ 1

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

.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

Ответ 2

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

Ответ 4

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

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);

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