Chrome 39 CSS3 gradient animation BUG,

Chrome 39 CSS3 gradient animation BUG,

Originally, the map page was running well. From last Thursday (), I began to receive reports from PM and QA about the webpage crash.

Then I reproduced it on the local machine. At first I thought there was a memory leak on the webpage. However, it had been running for so long, and neither IE nor Firefox had this problem, it seems to be related to chrome. In this case, evidence is required. So I guess it is not a BUG introduced by Chrome's new automatic upgrade. Then I started a long troubleshooting process.

I found several colleagues to assist in troubleshooting and did not find any memory usage exceptions on the page. However, the Chrome process memory will soar, and the memory usage will be more than 600 mb in a moment.

At first, I thought it was caused by PAGE flash, So I removed the flash introduced by the page. After comparison, I found that 7 MB of memory is saved (a flash occupies 7 MB of memory, the memory usage on the entire page is only 20 mb. It seems that flash is the memory killer and crash killer ). Then the test was full of surprises. The result was that the page would still crash, and this was helpless.

No way. You can only start from scratch and track the time point step by step. After refresh many times, I finally found a rule. After loading the map, the page started to soar in memory and the CPU was running at full capacity. After dozens of seconds, the CPU is normal, and the map begins to load the low map one after another.

Now we finally found a breakthrough, so we found the map development personnel to help locate the problem. After studying the problem for a long time, we found that, apart from the page burst phenomenon, there was still no progress in troubleshooting. So I kept refreshing my pages and observing the rules. Each time, the map low map is loaded first, and the page UI stops responding. After a while, the page is normal and other map maps are loaded. After observing the number of times I don't know, I guess it may be caused by map scaling. This is because after a PAGE map is loaded, the page will be zoomed in once, and the page will crash. When testing on other students' machines, some will reproduce, and some will not reproduce, it seems that some students have map amplification operations on their pages, while some do not.

After confirming the cause, I quickly wrote a test code. CSS:

.div {     height: 600px;     width: 600px;     background: red; }.transform {    transform: scale(200);}.transition {    -webkit-transition: -webkit-transform .25s cubic-bezier(0, 0, .25, 1);    -moz-transition: -moz-transform .25s cubic-bezier(0, 0, .25, 1);    -o-transition: -o-transform .25s cubic-bezier(0, 0, .25, 1);    transition: transform .25s cubic-bezier(0, 0, .25, 1)}

Because it is used for map development, you can also add some map basemap images. The HTML code is as follows:

<div class="div transition" id="d1">                                </div>

Then, write a piece of code to simulate the map amplification operation. The JS Code is as follows:

setTimeout(function () {    var d1 = document.getElementById("d1");    d1.classList.add("transform");}, 1000);setTimeout(function () {    var d1 = document.getElementById("d1");    d1.classList.remove("transform");    document.getElementById("d1").classList.remove("transition");}, 3000);

Then, refresh the page. If it is true, the page is actually just like the online page.

Find the cause and then solve it. After the page has been developed for so long, it is not really half past one that the change can be changed. Then it took half a day to switch the version of the map JS-API from 1.2 to 1.3, this is finally done (1.3 version of the API map scaling process is different from 1.2, ). After the QA test is secure, go online quickly. In the past two days, I was driven crazy by PM. I said in my ear every day that I had to go online quickly.

In the end, Joy alone is not as good as Joy. If you encounter any problems, we will share them with you. On the one hand, it raises a BUG for Chromium. On the other hand, it is really drunk in this code word.

Finally, put the complete code on the page, and attach a memory and CPU usage chart. If you are interested, try it on the local machine. Remember that the chrome version is 39.0.2171.71 m:

<! DOCTYPE html> 
CPU and memory usage: