Chrome浏览器下绝对定位元素display渲染bug实例页面

CSS代码：

.z { -webkit-transform: translateZ(0); }
                

HTML代码：

<p>
    <a href="javascript:" id="btnDisplay" class="btn btn-blue w160">改变图片display水平</a>
    <a href="javascript:" id="btnTranslateZ" class="btn btn-blue">同时toggle translateZ</a>
</p>
<strong>点击上面按钮，改变图片display水平：</strong>
<img id="image" class="abs" src="//image.zhangxinxu.com/image/study/s/s256/mm1.jpg">
                

JS代码：

(function() {
    var btnDisplay = document.getElementById("btnDisplay")
    , btnTranslateZ = document.getElementById("btnTranslateZ");
    var image = document.getElementById("image"), flagTransform = false;
    if (btnDisplay && btnTranslateZ && image && image.classList) {
        btnDisplay.onclick = function() {
            var display = image.style.display;
            if (display != "block") {
                image.style.display = "block";
            } else {
                image.style.display = "inline-block";
            }
            this.innerHTML = "display:" + image.style.display;  
        };
        btnTranslateZ.onclick = function() {
            // 和图片的共同的父节点
            var commonParent = this.parentNode.parentNode;
            btnDisplay.click();
            commonParent.style.webkitTransform = flagTransform? '': 'translateZ(0)';
            flagTransform = !flagTransform;
        };
    }
})();