Баг в CSS Chrome, разрушивший наш сайт

Это реальная история, случившаяся с нашим сайтом во время празднования Дня Благодарения.

Сайт перестал работать внезапно, ничего не предвещало такого оборота.

Поначалу я подумал, что проблема в нашем провайдере хостинга, потому что с ним уже случались проблемы ранее. Наш сайт уже трижды успевал «падать» по разным причинам, и это выглядело как типичная проблема с их стороны.

Когда мы пытались открыть сайт, то видели лишь пустую страницу, увы. пару раз после обновления удалось даже обновить страницу, но она не листалась вниз, никакие элементы типа ссылок не работали. Такое было везде, а не только на главной странице.

Недолго думая, я открыл панель разработчика Chrome, чтобы заглянуть в «сознание» страницы и понять причину ошибки. Все HTML элементы отображались корректно, да и сам исходный код загрузился корректно. Я видел абсолютно все, чего не видел на странице.

Следующим шагом была проверка логов с ошибками в cPanel. Неудача.

Это означало, что причиной сего страшного бага была не хостинговая компания. И тут я понял, что у нас большие проблемы. Чувствуя себя полностью виноватым, каясь, я начал дебажить свой код.

Отладка кода

Первым делом мною был проверен код JavaScript через консоль. Неа.

Удивительно, в JavaScript все исправно, но сервер не работает. К моему удивлению все просто замечательно работало в Firefox.

Что-то страшное стало происходить, и я это понял. Код сайта не обновлялся около недели. Более того, оно работал исправно дольше года. Как вдруг мое творение могло внезапно перестать отображаться в Chrome?

Набрал в Google “сайт медленно прокручивается в chrome” и увидел пост с упоминанием background-size: cover, который вызывал проблемы на некоторых ресурсах. В каждом посте нашего блога присутствуют изображения-обложки статей, использующие свойство background-size: cover для придания отзывчивости.

Я удалил эту строчку, но ничего не поменялось. Возможно, что есть еще какие-то ошибки в использовании CSS? Например, какое-нибудь преобразование, чересчур перегружающее компьютер?

Это изображение было в чем-то уникально, из-за чего я продолжил играться с его HTML и CSS. Когда я добавил display: none, остальная часть сайта заработала. Просвет!

Таким образом, я начал убирать свойства одно за другим, пока не нашел источник головной боли:

box-shadow: inset 0 -360px 360px -160px #000, inset 0 290px 330px -160px #000;

Всего лишь одна строка смогла вывести из строя весь ресурс!

Как я это исправлял

Этот box-shadow присутствовал не только в эстетических целях. Он также создавал темный фон для заголовка поста и меню с навигацией, без чего текст был бы нечитаемым.

Необходимо было как-то его вернуть. Для этого я создал два новых псевдоэлемента position: absolute и еще каплю магии с background-image: linear-gradient.

&:before, &:after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
}
&:before {
    top: 0;
    height: $headerHeight + 20px;
    background-image: linear-gradient(#000, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
}
&:after {
    bottom: 0;
    height: 40%;
    background-image: linear-gradient(to top, #000, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
}

Эффект создавался тот же, но только теперь сайт работал.

Конечно, это не идеальный выход, хотя… С box-shadow у меня была возможность создавать красивые рамки. С 2 градиентами я лишь могу придавать эффект тени в верхней и нижней части картинки.

Собственно, в чем проблема?

Это был даже не код, который был мною заменен, но ошибка все равно кроется в CSS. Это реальный, открытый баг Chrome, представленный в его последней версии, M39, обнаруженный 26 ноября 2014 года.

Кратко говоря, в браузере возникает ошибка при подсчете параметров теней с большими числами. Я заметил, что проблема начинается примерно с 200px. Баг не влияет на использование outset в box-shadow, а лишь на inset.

Вы можете наблюдать его в действии здесь, используя Chrome.

Попробуйте прокручивать колесико мыши вверх и вниз, и, в зависимости от быстроты вашего компьютера, браузер начнет зависать все больше и больше. Сделайте box-shadow больше (1000px), и все перестанет работать вообще. Затем просто закомментируйте известные нам строки, и браузер вернется к жизни.

Думая, множество других сайтов когда-то испытали подобную напасть. Лично мне удалось заметить это на сайте французского подразделения Toyota, но на данный момент проблема устранена.

Вывод

Несколько лет назад такая ошибка могла быть приемлемой и даже ожидаемой. Однако, в наши дни это недопустимо, так как возможности в программировании крайне большие, и играться с CSS никто не запрещал.

Вам может показаться, что box-shadow таких размеров встречается нечасто, и вы будете неправы. Фоновое изображение размером 1980px встречаются крайне часто на больших экранах, и, к сожалению, другого способа их качественной обработки, кроме box-shadow, нет. Я надеюсь, что команда Chrome закроет этот баг.

Удачи вам в ваших проектах.

Автор: alexandfox

Источник