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

CSS代码：

.abs_vh {
    position: absolute; visibility: hidden;
}
.bug {
    overflow: hidden; /* 重要条件, inline水平无效 */
}
.hover:hover .bug {
    visibility: visible;
}
                

HTML代码：

<div class="hover">
    Chrome罕见visibility渲染bug(<em>hover me</em>)
    <div class="abs_vh">
        <div id="bug" class="bug"><img src="/image/study/s/s128/mm1.jpg"></div>
    </div>
</div>
                

JS代码：

var btnTranslateZ = document.getElementById("btnTranslateZ");
var bug = document.getElementById("bug"), flagTransform = false;
if (btnTranslateZ && bug && bug.classList) {
    btnTranslateZ.onclick = function() {
        if (flagTransform == true) {
            bug.style.webkitTransform = "";
            this.innerHTML = "当前没有-webkit-transform:translateZ(0), hover不显示妹子";
        } else {
            bug.style.webkitTransform = "translateZ(0)";
            this.innerHTML = "已添加-webkit-transform:translateZ(0), 再hover试试";
        } 
        flagTransform = !flagTransform;
    };
}