Баг в 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 закриє цей баг.

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

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.