A bug in CSS Chrome that destroyed our site

Original author: David Tintner
  • Transfer
This is a true story that happened to our site during Thanksgiving.

The site stopped working suddenly, nothing foreshadowed such a turn.

At first, I thought that the problem was with our hosting provider, because problems had happened before. Our site has already managed to “fall” three times for various reasons, and it looked like a typical problem on their part.

When we tried to open the site, we saw only a blank page, alas. a couple of times after the update it was even possible to refresh the page, but it did not scroll down, no elements such as links worked. This was everywhere, and not just on the main page.

Without thinking twice, I opened the Chrome developer panel to look at the “consciousness” of the page and understand the cause of the error. All HTML elements were displayed correctly, and the source code itself loaded correctly. I saw absolutely everything that I did not see on the page.

The next step was checking the error logs in cPanel. Failure.

This meant that the reason for this terrible bug was not the hosting company. And then I realized that we have big problems. Feeling completely guilty, repenting, I started debasing my code.

Code debugging


The first thing I did was check the JavaScript code through the console. Nope.

Surprisingly, everything works fine in JavaScript, but the server is down. To my surprise, everything just worked great in Firefox.

Something terrible was beginning to happen, and I realized that. The site code has not been updated for about a week. Moreover, it worked properly for more than a year. When did my creation suddenly stop showing up in Chrome?

I typed in Google “the site slowly scrolls in chrome” and saw a post with a mention background-size: coverthat caused problems on some resources. Each post in our blog contains cover art for articles that use the property background-size: coverto give responsiveness.

I deleted this line, but nothing has changed. Perhaps there are still some bugs in using CSS? For example, some kind of transformation that overloads the computer?

This image was somewhat unique, which is why I continued to play with its HTML and CSS. When I added display: none, the rest of the site worked. Clearance!

Thus, I began to remove the properties one by one, until I found the source of the headache:
box-shadow: inset 0 -360px 360px -160px #000, inset 0 290px 330px -160px #000;

Only one line was able to disable the entire resource!

How did I fix it


This was box-shadowpresent not only for aesthetic purposes. He also created a dark background for the post title and navigation menu, without which the text would be unreadable.

It was necessary to somehow return it. To do this, I created two new pseudo-elements position: absoluteand another drop of magic with 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));
}

The effect was the same, but only now the site was working.

Of course, this is not an ideal solution, although ... Since box-shadowI had the opportunity to create beautiful frames. With 2 gradients, I can only give a shadow effect at the top and bottom of the picture.

Actually, what is the problem?


It was not even the code that I replaced, but the error still lies in the CSS. This is a real, open Chrome bug introduced in its latest version, M39, discovered on November 26, 2014.

In short, an error occurs in the browser when calculating the shadow parameters with large numbers. I noticed that the problem starts at about 200px. The bug does not affect the use outsetof box-shadow, but only on inset.

You can watch it in action here using Chrome.

Try to scroll the mouse wheel up and down, and, depending on the speed of your computer, the browser will start to freeze more and more. Dobox-shadowmore (1000px) and everything will stop working at all. Then just comment out the lines we know, and the browser will come back to life.

Thinking, many other sites once experienced a similar scourge. Personally, I managed to notice this on the website of the French division of Toyota , but at the moment the problem is fixed.

Conclusion


A few years ago, such a mistake could be acceptable and even expected. However, these days it is unacceptable, since the possibilities in programming are extremely large, and no one forbade playing with CSS.

It may seem to you that box-shadowthis size is not common, and you will be wrong. A 1980px background image is extremely common on large screens, and, unfortunately, there is no other way to do it with good quality processing box-shadow. I hope the Chrome team closes this bug.

Good luck with your projects.

Also popular now: