Chrome 39 CSS3 渐变更画BUG

时间 2019-11-30

标签 chrome css3 css 渐变 bug 栏目 Chrome 繁體版

原文原文链接

原本地图网页运行的好好的，忽然从上周四(2014/11/27)开始，就开始接到 PM 和 QA 说网页崩溃的报告。javascript

而后我就在本机重现，刚开始觉得是有网页上有什么内存泄漏；但是都运行这么长时间了，而且 IE 和 Firefox 都没有出现过此问题，看来应该是和 chrome 有关系了。说归这样说，但是须要证据啊。因而就猜想是否是 Chrome 新自动升级引入的BUG，而后就开始了漫长的排查过程。html

找了好几个同事来协助排查，也没有发现页面上有任何内存使用异常的现象；可是就 Chrome 进程内存却会飙升，而且嗖嗖的一会就 600M 以上了。java

一开始觉得是页面 flash 致使的；因而就把页面引入的 flash 去掉了，可对比后发现才省去 7M 内存（一个 flash 就占 7M，而整个页面内存才占用 20M，看来 flash 做为内存杀手和崩溃杀手，果然名不虚传啊）。而后就满怀惊喜的测试，结果是页面依旧会崩溃，这下又无奈了。web

没办法，只能从头再来，一步步的跟踪时间点。刷新了好屡次以后，终于发现了一个规律，页面在加载完地图后，开始内存飙升，CPU 满负荷运转。等过个几十秒，CPU正常，而后地图开始陆续加载低图。chrome

这下终于找到了一个突破口，因而找来地图开发的同窗，让来协助定位问题所在。可一块儿研究了半天，除了观察到页面爆卡这个现象以外，缘由排查依旧毫无进展。因而又不停地刷新页面，观察规律。每次都是先加载地图低图，而后页面 UI 中止响应，再过一段时间，页面正常，开始加载页面其余地图底图。观察了不知道多少次以后，猜想多是地图缩放致使的。由于页面地图加载后，会有一次放大，此时页面就会崩溃；在其余同窗机器上测试，有的会复现，有的不会复现，好像就是由于有的同窗页面会有地图放大操做，而有的没有地图放大操做。app

肯定了这个缘由以后，赶忙写了一个测试代码。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)
}

因为是作地图开发的，因此也放入一些地图底图图片，HTML 以下代码：spa

<div class="div transition" id="d1">
    <img src="http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&amp;size=1&amp;scale=1&amp;style=7&amp;x=1685&amp;y=775&amp;z=11">
    <img src="http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&amp;size=1&amp;scale=1&amp;style=7&amp;x=1686&amp;y=775&amp;z=11">
    <img src="http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&amp;size=1&amp;scale=1&amp;style=7&amp;x=1685&amp;y=776&amp;z=11">
    <img src="http://webrd03.is.autonavi.com/appmaptile?lang=zh_cn&amp;size=1&amp;scale=1&amp;style=7&amp;x=1686&amp;y=776&amp;z=11">
    <img src="http://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&amp;size=1&amp;scale=1&amp;style=7&amp;x=1685&amp;y=774&amp;z=11">
    <img src="http://webrd03.is.autonavi.com/appmaptile?lang=zh_cn&amp;size=1&amp;scale=1&amp;style=7&amp;x=1687&amp;y=775&amp;z=11">
    <img src="http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&amp;size=1&amp;scale=1&amp;style=7&amp;x=1686&amp;y=774&amp;z=11">
    <img src="http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&amp;size=1&amp;scale=1&amp;style=7&amp;x=1684&amp;y=776&amp;z=11">
</div>

而后就是写一段代码，模拟地图放大操做，JS代码以下：code

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);

而后刷新一下页面，果然，页面还真是实实在在的卡爆了，和线上网页卡爆现象如出一辙。orm

找到了缘由所在，而后就是怎么解决了。页面开发了这么久，还真不是一时半会说改就能改的。而后费了半天的时间，把地图 JS-API 的版本从 1.2 切换到 1.3，这下就终于搞定了（1.3版本API地图缩放缩放过程与1.2不一样，基本不会出现此问题）。等QA测试稳妥后，赶忙上线。这两天快被 PM 给逼疯了，每天在耳边说，赶忙上线赶忙上线。

到最后，独悦乐不如众悦乐，遇到问题就要会和你们分享一下。一方面给 Chromium 提BUG，一方面在此码字，真是醉了。

最后，放上页面完整代码，并附上内存和CPU使用图表，有兴趣的同窗能够在本机尝试一下，记住 chrome 的版本号是39.0.2171.71 m：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Chrome transition and transform scale bug</title>
    <style>
        .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)
        }
    </style>
</head>
<body>
<a href="javascript:" id="a1">点击我，测试页面是否相应？</a>
<div id="a1Test"></div>
<script>
    var clickedTimes = 0;
    document.getElementById("a1").addEventListener("click", function(){
        clickedTimes++;
        document.getElementById("a1Test").innerHTML = "你一共点击了 " + clickedTimes + " 次！";
    }, false);
</script>
<div class="div transition" id="d1">
    <img src="http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&amp;size=1&amp;scale=1&amp;style=7&amp;x=1685&amp;y=775&amp;z=11">
    <img src="http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&amp;size=1&amp;scale=1&amp;style=7&amp;x=1686&amp;y=775&amp;z=11">
    <img src="http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&amp;size=1&amp;scale=1&amp;style=7&amp;x=1685&amp;y=776&amp;z=11">
    <img src="http://webrd03.is.autonavi.com/appmaptile?lang=zh_cn&amp;size=1&amp;scale=1&amp;style=7&amp;x=1686&amp;y=776&amp;z=11">
    <img src="http://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&amp;size=1&amp;scale=1&amp;style=7&amp;x=1685&amp;y=774&amp;z=11">
    <img src="http://webrd03.is.autonavi.com/appmaptile?lang=zh_cn&amp;size=1&amp;scale=1&amp;style=7&amp;x=1687&amp;y=775&amp;z=11">
    <img src="http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&amp;size=1&amp;scale=1&amp;style=7&amp;x=1686&amp;y=774&amp;z=11">
    <img src="http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&amp;size=1&amp;scale=1&amp;style=7&amp;x=1684&amp;y=776&amp;z=11">
</div>
<script>
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);
</script>
</body>
</html>

CPU和内存占用状况：