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

                

效果:

请使用Chrome或同等内核浏览器访问本demo:

给.bug元素增加webkit届的haslayout translateZ

Chrome罕见visibility渲染bug(hover me)