CSS will crash your app

today to say the CSS code really is to let the app crash, as to believe it or not, look at the picture to know.

Suddenly received an e-mail, the approximate content is that because of the CSS problem to let the app hang. At that time thinking, what kind of CSS so good, incredibly let the app hang! So out of the phone according to the message prompts the URL opened to look at, I just want to say, this code, the amount, forget, or do not spit groove, in fact, if I write, it will certainly be worse.

Although it is a page from other departments, but as a member of the company, how can not be considered for the company's products. It sounds like a kiss-up, actually, because I'm most curious about the cause of the bug and, of course, about the product.

So the next morning, the company began to mine ...

Take a closer look at the code, starting from the initial suspicion that the performance impact of the animation low-end device runs. The results found that the so-called performance problem is not so strong, a moment can not find a clue, and then the source file is not in our own side, had to open the vase to catch CSS files, and then replace, with the deletion method a little bit to check.

Finally, in the master's point of reference and provided a URL to see, incredibly rem caused.

Everyone should know this website, is a special look at the bug, of course, can also mention the bug.

@-webkit-keyframes crashchrome {         0%{-webkit-transform:translatex (0rem);}. anim:before{     content: "";     Width:3rem;     Height:3rem;         Border-radius:3rem;         Position:absolute;         Left:5rem;         Top:5rem;             Background-color: #06839f;             -webkit-animation:crashchrome; }

<div class= "Anim" ></div>

Just beginning to see this piece of CSS code, feel this seems to be no problem ah, not just through: before this pseudo-element to do a animation animation effect, and then use REM this unit amount.

Anyway, it's the best solution.

Or to find a test machine, continue to delete the problematic page code bar. First use of Samsung, found that no problem, and then use the millet, and sure enough rushed to collapse. Look at the version, Samsung is Android 4.4.2, Xiaomi is Android 4.4.4, is it a version of the relationship?

In short, at the beginning of the animated part of the section of the investigation for a long time did not find the problem. Finally, go back to the page that already reported the bug to see the specific instructions.

Suddenly think, this page used: Before to do animation, we also have this page, so a search, the result, really!

Hurry up on our own page of this code to take over to do, and finally found you. Hurry back to the e-mail to tell each other ...

Once again, thank the Master of the reserve for the opportunity to learn about a problem that has not been learned.

This bug has been disposed of in the current desktop device, according to the Bug list page, the bug was found in

Chrome version:34.0.1847.116 (Official Build 260972) m

This version, and each system has. However, now Chrome is already more than 50 versions, so the desktop does not need to worry at all.

But this time since is on the mobile side met, and is Android 4.4.4 this version, although it is found in Xiaomi 3, but Android 4.4.4 This version should be more common, it is really this problem.

Get the UA information for this webview, see one of them is chrome/33.0.0.0 Mobile Safari, so I think ah, maybe it should be this webview relationship, after all, I am in the Millet 3 test machine on the various browsers have looked over, did not find Problem.

Now it's time to know that REM and animation are coming back to this bug, but there are no problems with other elements.

Then start experimenting with all kinds of experiments:

Replacing animation with transition, and also by altering the properties of REM, found that the result of the idea was that there was no problem.

Think: Before is a pseudo-element, then for the pseudo-element selector There are a few, all try to see.

It turns out that all four pseudo-element selectors will cause the page to crash ...

The underlying rendering mechanism of the browser (webview) I do not understand, but for the time being, it may be because of chrome/33.0.0.0 Mobile Safari This version of the problem, if you use animation in pseudo-elements, and change the REM The value of the page crashes.

So maybe that's the way it should be:

Used: One of the pseudo-elements such as before to do animation animation;

The animation animation changes the value of one of the REM;

With this premise, the version browser with this bug is used, which causes the page to crash.

If you want to avoid this bug, it should be:

Change a webview, the higher version should be better;

Use animation animations in pseudo-elements without REM units;

But it seems that now everyone will go with REM units, and then also to use animation to do animation, so good, not the pseudo-elements of the user two things.

