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

Original author: David Tintner
  • Translation
Это реальная история, случившаяся с нашим сайтом во время празднования Дня Благодарения.

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

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

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

Недолго думая, я открыл панель разработчика 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 закроет этот баг.

Удачи вам в ваших проектах.
Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 47

    +36
    Опять костыли для IE Chrome.
      –34
      Просто любопытства ради: я верно понимаю, что вы выложили сайт на боевой хостинг, не проверив работу в основных версиях основных браузерах?
        +33
        Это перевод, у автора спрашивать такое некорректно.
        Но данный баг заведён на 39ю версию хрома, это баг в новой версии хрома.
          +4
          А между тем, в 41-ой (beta) все ок.
            –2
            Ну вот да, впервые я пропустил бэйдж «перевод». Эх.
              0
              Наверно многие привыкли сразу к контенту переходить, в общем как и я, и обычно, если перевод, то пишут в начале что-то вроде «От переводчка...», «Представляю волный перевод...» и все в таком духе, а в этой статье такого нет и наверно многим вначале показалось, что это авторская работа и личный опыт. Я не говорю, что автор этого перевода не так написал эту статью или перевел, просто дело привычки.
                +7
                Я сразу заподозрил, что это перевод потому, что в статье в самом начале упоминается день благодарения, который, насколько я понимаю, празднуется только в США.
                  0
                  В Канаде тоже отмечается.
                0
                Там, кстати, из без бэйжа всё было понятно с первой строчки:
                нашим сайтом во время празднования Дня Благодарения
              +24
              Код сайта не обновлялся около недели. Более того, оно работал исправно дольше года. Как вдруг мое творение могло внезапно перестать отображаться в Chrome?

              Просто прилетело обновление для Хрома.
              Если подумать, то IE6 в этом плане даже был поприятнее — ты паришься во время разработки, но зато потом все работает у всех. Теперь же все может внезапно сломаться.
                +1
                Спасибо, пропустил этот момент. Невнимательно читал. Прошу прощения.
                  0
                  :d не соглашусь, не раз встречал ситуацию когда попадались такие ie6 в которых проявлялись своеобразные баги, которых у других не было. И ie7, ie8 такие попадались. А ты сидишь и взрываешь мозг почему в трех ie6 все ок, а в этом… аж в дрож снова кинуло…
                    +1
                    Всякое бывало. Мне как-то пришлось все под ie5.5 допиливать, прямо у заказчика, на серверной машине (какая-то серверная винда крутилась, не помню). Дикое время веб-разработки =)
                    Но читая такие посты, я радуюсь, что Firefox и IE не переходят на Webkit/Blink, и конкуренция сохраняется.
                    • UFO just landed and posted this here
                        +1
                        Не говорите глупостей, Spartan будет на Edge(переделанный Trident) и Trident(для старых корпоративных сайтов).
                    • UFO just landed and posted this here
                    0
                    del(надо перечитывать и обновлять комменты перед отправкой своего)
                    –5
                    Странно, что всё основано только на box-shadow. Похоже, что поддерживаемый круг браузеров мал.
                    Помнится, когда сам делал размытость, то пришлось повозиться и написать что-то своё для ie, chrome,…
                      +4
                      Последний абзац для меня остался загадкой. При чем здесь box-shadow, который он натянул чтобы повторить эффект из дизайна и обработка изображений на все сайтах.
                        +2
                        39-й хром помимо этой гадости ещё внёс нецелые scrollTop и т.п., поломав огромную кучу энтерпрайз сайтов.
                          +3
                          У меня в последней версии хрома перестал корректно отображаться параллакс, www.seoinspector.com.ua (не в коем случае не реклама), появились какие-то черные квадраты, а то и весь черный становится. Сначала думал что сам сломал, но я туда не лез уже несколько месяцев + на демо странице шаблона та же фигня. Проблема вроде как только на винде, на OS X все норм.
                            0
                            P.S. Сегодня с утра паралакс перестал работать и на последней стабильной опере. Поменял background-attachment c fixed на scroll, теперь глюков нет, но вот и паралакса как такогово тоже больше нет (теперь это просто картинка). Может кто подскажет в чем проблема и как исправить? Паралакс у меня если что в блоке «Почему мы». Спасибо!
                            +1
                            Очень неприятная ситуация, когда приходишь с утра на работу, и сайт, который вчера прекрасно работал, сегодня показывает какую-то хрень. Столкнулся с таким на 36-й версии с transition'ами и псевдо-элементами: code.google.com/p/chromium/issues/detail?id=389455
                              +3
                              На моем компе скролл на страничке с примером вызвал BSOD… OS Win 8.1
                                +5
                                Рост сложности CSS не проходит даром. CSS сейчас это очень мощный инструмент. И эту мощность обеспечивают многие тысячи строк кода, в которых баги были, есть и будут. И чем сложнее будут становиться стандарты, тем чаще будут повторяться такие ситуации.

                                Имхо, веб идёт не в ту сторону. Надо бы уменьшать размер стандартов, делать меньше разных фич, за счёт комбинации которых достигались бы остальные. Грубо говоря семи нот хватает для всей музыки. Небольшой стандарт языка C, куда меньше, чем стандарт CSS и по объёму и концептуально позволяет реализовать и CSS и ядро операционной системы, в которой вы сейчас сидите и множество других программ.
                                  +1
                                  Ну да. Фильтры и эффекты слоев постепенно перекочевывают из Photoshop в CSS. Таким макаром скоро останется только поддержку CSS-ом фотошоповских плагинов реализовать.
                                    0
                                    Портировать фотошоп в браузер? Технологии уже есть.
                                      0
                                      Берите выше батенька, сделать их стандартами, дефакто обязав браузеры поддерживать их из коробки.
                                        0
                                        Да чо уж там, эмулятор x86 в браузере уже есть, осталось дело за малым. И никакого CSS, кстати!
                                  • UFO just landed and posted this here
                                      0
                                      ИМХО, рост сложности это не всегда плохо. Если размышлять по вашей логике дальше — то нужно вообще ориентироваться на ассемблер, в нём ведь стандарт ещё меньше чем в С, а реализовать можно всё. Я согласен, некоторые элементы в том же СSS довольно таки не нужны, но в текущей ситуации CSS движется в таком направлении чтобы можно было делать как можно более элементов интерфейса не прибегая к JS. Многие вещь с интерфейса никуда не денутся, так пусть же они работают на «нативном» языке, чем на костылях джаваскрипта.
                                        +1
                                        Сложность css подступает к той черте, за которой один человек не способен удержать это всё в голове и придётся в дополнение к верстальщику ещё верстальщика эффектов отдельно заводить.
                                          0
                                          По-моему опытному верстальщику вполне возможно удерживать в голове html + css. backend разработчики ведь удерживают в голове кашу из php-sql-js (как пример) плюс куча стандартов и протоколов, так почему верстальщики не освоят всего два языка?
                                            0
                                            SQL вещь довольно простая на верхнем уровне(или вообще берут ORM готовый последнее время), а на нижнем есть отдельные люди, понимающие как устроена конкретная БД и оптимизирующие конкретный запросы. js, на мой взгляд, к backend тоже слабо относится. Либо он вместо php/python/ruby/go/erlang etc, либо это frontend.
                                              0
                                              Я не знаю точно куда можно отнести JS, но лично для меня это что-то среднее, но относящееся всё-таки больше к backend. Оно то вроде как и на frontend работает, но верстальщики не станут писать скрипты для работы с ajax или websocket, плюс под это всё дело надо и backend определённым образом затачивать.
                                        • UFO just landed and posted this here
                                        +1
                                        Недавно был замечена еще одна проблема в Хроме. На сайте есть overlay, выполненный с помощью радиальных градиентов. Как и положено, затемнение появляется при каком-то действии. И вот при его появлении вкладка хрома начинает быстро поглощать оперативную память(до 2 Гб за несколько секунд). Пример такого фона есть тут.

                                        Самое интересное, что это случилось как-то само по себе. Ведь когда делали такую красивость, все было протестировано и работало много-много месяцев, а потом внезапно стало вешать браузер.
                                          +1
                                          Знакомая ситуация. У нас так «прилетело» обновление хрома с поддержкой новый фич strict mode и все сломало, поскольку к ним мы готовы не были.

                                          Обновление браузеров в фоне делает ситуацию еще интереснее.
                                            –1
                                            Извините за оффтоп, ох и перевод, — «разрушивший наш сайт». Увидев заголовок, сразу подумал как браузер может разрушить сайт!, никак, полез прочитать, а оказалось…
                                            Сайт не разрушенный, разрушенный это когда на сервере файлы удалены и т.п. а это просто баг движка хрома, приведший к тому, что сайт не отображался в браузере Хром
                                            Правильным было название
                                            'Баг в CSS Chrome, перестает отображаться сайт" и т п
                                              –1
                                              Я думаю, при переводе не обязательно строго соответствовать содержанию поста.
                                              Возможно, Ваш вариант заголовка заинтересовал Вас же меньше, чем тот, что сейчас. Вы сразу заинтересовались и прочли.
                                                –1
                                                Сам работал долгое время главным редактором. Да, это работает, но… для обычных обывателей, которые не умеют думать. Это IT. Когда зашел, прочел, подумал, автор (не вы, я понял, что перевод) дилетант, раз написал такой заголовок, не может отличить одно от другого. Дочитал один абзац, посмеялся, закрыл.
                                                Теперь вопрос, доверял бы я дальше «этому» автору? ;) Хороший заголовок можно сделать и без эпатажа. А так это ввод в заблуждение.
                                                Какой нибудь дебил прочтет, а потом друзьям будет рассказывать что хром «разрушает» сайты на полном серьёзе.
                                                  +1
                                                  … Это все равно что в научном журнале, где печатаются «нобелевские» лауреаты, написать «Астероид взорвет землю», где будет описан килограммовый метеорит, который пропахал землю фермеру. Все сразу подумают… автор 3.14л
                                              • UFO just landed and posted this here
                                                  –1
                                                  Как человек долгое время проработавший главным редактором. скажу так, надо знать место где эпатажный (аллегорию) заголовок размещать. Есть бульварная пресса (в 99% примут за «правду»), а есть научная (где в 99% это примут за 3.14льство и больше никакого доверия к автору не будет).
                                                  Здесь был заголовок как бомба, а оказалось, обычный css -шный баг, на который и времени не хочется переводить
                                                  И обычно за эпатажными заголовками скрывают полностью бездарные статьи.
                                                  Извините конечно, без обид, не к вам лично это относиться
                                                  • UFO just landed and posted this here
                                                –1
                                                42.0.2288.6 dev-m, нагрузка chrome.exe на ЦП — 45%. В остальном всё нормально.
                                                • UFO just landed and posted this here

                                                  Only users with full accounts can post comments. Log in, please.