Chrome CSS bug that destroyed our site

This is the real story that happened on our site during Thanksgiving Day.

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 already happened to it 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 link type elements worked. This was everywhere, not just on the main page.
')
Without thinking twice, I opened the Chrome developer panel to look into the page “consciousness” and understand the cause of the error. All HTML elements were displayed correctly, and the source code itself was loaded correctly. I saw absolutely everything that I did not see on the page.

The next step was to check the logs with errors in cPanel. Failure.

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

Debugging code

First of all, I checked the JavaScript code through the console. Nope

Surprisingly, everything is fine in JavaScript, but the server is not working. To my surprise, everything just worked fine in Firefox.

Something terrible began to happen, and I realized that. The site code has not been updated for about a week. Moreover, it worked well for longer than a year. How could my creation suddenly stop appearing in Chrome?

I typed in Google “the site is scrolling slowly in chrome” and saw a post mentioning background-size: cover , which caused problems on some resources. In each post of our blog, there are cover images of articles that use the background-size: cover property to give responsiveness.

I deleted this line, but nothing has changed. Is it possible that there are any other mistakes in using CSS? For example, any transformation overloading 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 started working. Clearing!

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 could disable the entire resource!

How I fixed it

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

It was necessary to somehow return it. For this, I created two new pseudo-elements position: absolute and 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 created the same, but only now the site worked.

Of course, this is not an ideal way out, though ... With box-shadow , I had the opportunity to create beautiful frames. With 2 gradients, I can only add a shadow effect to the top and bottom of the image.

Actually, what's the problem?

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

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

You can watch it in action here using Chrome.

Try scrolling the mouse wheel up and down, and, depending on the speed of your computer, the browser will start to hang more and more. Make the box-shadow larger (1000px), and everything will stop working altogether. Then just comment out the known lines, and the browser will return to life.

Thinking many other sites once experienced a similar attack. Personally, I was able to notice this on the website of the French division of Toyota , but at the moment the problem has been fixed.

Conclusion

A few years ago, such a mistake could be acceptable and even expected. However, today it is unacceptable, since the possibilities in programming are extremely large, and nobody has forbidden to play with CSS.

It may seem to you that box-shadow this size is rare, and you will be wrong. The 1980px background image is extremely common on large screens, and, unfortunately, there is no other way to handle them besides box-shadow . I hope that the Chrome team will close this bug.

Good luck with your projects.