关于chrome下的bug
最近看了大神的一篇文章，于是尝试了一下里面说的bug以及修复
1.Chrome下absolute绝对定位元素部分display属性值不渲染bug
首先还原一下bug..
ff下的下效果
点击按钮后的效果
代码如下：
<style>
.img{
width:200px;
position:absolute;
-webkit-transform: translateZ(0);
}
.btn{
width:200px;
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button;
background:blue;
display: block;
}
</style>
<body>
<div id='demo'>
<button class='btn' id='btn'>图片display:inline-block</button>
<strong>点击上面按钮，改变图片display水平：</strong><img src="./img/1.jpg" id='img' class='img' alt="">
</div>
</body>
<script>
//兼容绑定事件
function bindEvent(elem,type,fn){
window.addEventListener?elem.addEventListener(type,fn,false):elem.attachEvent('on'+type,fn);
}
var btn = $('btn'),img = $('img'),demo = $('demo');
bindEvent(btn,'click',function(){
if(img.style.display == 'block'){
img.style.display = 'inline-block';
btn.innerHTML = '图片display:inline-block';
}else{
img.style.display = 'block';
btn.innerHTML = '图片display:block';
}
});
</script>
现在看看chrome下的效果
可以看出img没有随着display的改变而换行，
要注意的是，只有当图片元素设置了position，并且没有设top和left的情况下才会出现这种bug
bug的修复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.translateZ{
-webkit-transform: translateZ(0);
}
.img{
width:200px;
position:absolute;
-webkit-transform: translateZ(0);
}
.btn{
width:200px;
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button;
background:blue;
display: block;
}
</style>
<body>
<div id='demo'>
<button class='btn' id='btn'>图片display:inline-block</button>
<strong>点击上面按钮，改变图片display水平：</strong><img src="./img/1.jpg" id='img' class='img' alt="">
</div>
</body>
<script>
//获取元素
function $(id){
return document.getElementById(id);
}
//判断类
function hasClass(obj, cls) {
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
//增加类
function addClass(obj, cls) {
if (!this.hasClass(obj, cls)) obj.className += " " + cls;
}
//删减类
function removeClass(obj, cls) {
if (hasClass(obj, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg, ' ');
}
}
//兼容绑定事件
function bindEvent(elem,type,fn){
window.addEventListener?elem.addEventListener(type,fn,false):elem.attachEvent('on'+type,fn);
}
var btn = $('btn'),img = $('img'),demo = $('demo');
bindEvent(btn,'click',function(){
if(img.style.display == 'block'){
img.style.display = 'inline-block';
removeClass(demo,'translateZ');
btn.innerHTML = '图片display:inline-block';
}else{
img.style.display = 'block';
//addClass(demo,'translateZ');
btn.innerHTML = '图片display:block';
}
});
</script>
</html>
修复的方法，利用的是 -webkit-transform: translateZ(0);
改变display为block的时候，同时添加 -webkit-transform: translateZ(0);
改变display为inline-block的时候，同时删除 -webkit-transform: translateZ(0);
2.Chrome下absolute绝对定位元素具有overflow属性的块状子元素visibility hover不渲染bug
Chrome浏览器下，绝对定位元素，同时visibility:hidden时候，如果子元素具有块状水平，
同时设置了overflow:hidden; 则父元素hover时候，无法让子元素visibility:visible渲染生效！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.outer{
position:absolute;
visibility: hidden;
}
.bug{
overflow: hidden;/* 重要条件 */
}
.demo:hover .bug {
visibility: visible; /* Chrome浏览器下，此声明无效 */
}
</style>
<body>
<div class='demo'>
Chrome罕见visibility渲染bug(<em>hover me</em>)
<div class='outer'>
<div class='bug' id='bug'><img src="img/1.jpg"></div>
</div>
</div>
</body> </html>
ff下的效果
chrome下的效果
其实造成这效果的原因和position有很大关系，如果把position去掉visibility的效果有可以呈现了
但是如果项目需要用到position：absolute，那么可以用下面的方法
.hover:hover .bug {
visibility: visible;
-webkit-transform: translateZ(0); /* 解决方法*/
}
添加后，问题就解决了
本文参考自http://www.zhangxinxu.com/wordpress/2015/01/chrome-absolute-display-visibility-render-bug/
关于chrome下的bug的更多相关文章
- chrome下float元素下input选中内容bug
今天在写一个小demo的时候,发现chrome下一个很奇怪的bug. 我的代码如下: <!DOCTYPE html> <html lang="en"> &l ...
- Chrome出了个小bug：论如何在Chrome下劫持原生只读对象
Chrome出了个小bug:论如何在Chrome下劫持原生只读对象 概述 众所周知,虽然JavaScript是个很灵活的语言,浏览器里很多原生的方法都可以随意覆盖或者重写,比如alert.但是为了保证 ...
- IE下设置unselectable与onselectstart属性的bug，Firefox与Chrome下的解决方案
在IE下给DIV设置unselectable与onselectstart属性,可以让div的内容不能选中,这个功能在很多情况下,非常有用,但是他的bug太明显, 直接使用一个DIV是可以的,比如: & ...
- Linux下Chrome浏览器的BUG
“我胡汉三又回来了”,好久没出现在博客园了,准备考试什么的最烦躁了,今天又重新整了下我的Ubuntu,结果发现了一个Chrome浏览器的Bug,但是与其说它是个Bug,还不如说它是个Joke. 好吧, ...
- IE下的bug
断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决 ,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1 ...
- input 光标在 chrome下不兼容 解决方案
input 光标在 chrome下不兼容 解决方案 height: 52px; line-height: normal; line-height:52px\9 .list li input[type= ...
- ie下的bug之button
场景描述: 现在页面设计是都喜欢自定义按钮样式,某日接收到页面发现在ie下有bug,上代码: <div> <button><span><a href=&quo ...
- 如何在Chrome下Debug Mocha的测试
简介 经过前两篇文章的介绍,相信读者对Mocha应该有一定的认知了,本文重点讲述如何在Chrome下Debug Mocha Test, 方便你在测试fail的时候troubleshooting. 关键 ...
- 在chrome下的文本框sendkeys，提示element can't focus--解决方法
在chrome下的文本框sendkeys,提示element can't focus--解决方法(成都-半步流雲,群友解决) 成都-半步流雲1.升级你的chromedriver,2.降chrome版本 ...
随机推荐
- 洛谷P1486 [NOI2004]郁闷的出纳员(splay)
题目描述 OIER公司是一家大型专业化软件公司,有着数以万计的员工.作为一名出纳员,我的任务之一便是统计每位员工的工资.这本来是一份不错的工作,但是令人郁闷的是,我们的老板反复无常,经常调整员工的工资 ...
- vs的 Avalon 自动补全
以VS2013为例: 1.关闭 Visual Studio 2.打开 C:/Program Files (x86)/Microsoft Visual Studio 12.0/Common7/Packa ...
- Hibernate4获取Connection，ResultSet对象
项目中需要一个json对象,封装的时候,需要数据的列名. 在jdbc里面,可以有个ResultMetaData对象获取列名字.因为我用的是hibernate,这个框架已经封装了很多,一般是难以获得re ...
- Js复制链接代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- [Erlang18]教练！又发现Erlang Shell里面的神奇函数一只
人嘛,总是想提高效率,创造更多的价值,同时也得到更多的选择空间.可一个人的精力,时间终归是有限的,减少自身重复或无意义工作就显得格外重要! 要么懂得授权,要么把重复的工作交给机器来做: 现实: 美 ...
- ASP.NET MVC学习（一）
这几天在学习asp.net mvc 一上来就被书中的什么依赖注入,什么单元测试搞的晕晕呼呼,根本就不理解,前天开始做书中的运动商店项目,一上来就遇到个大难题,书中的连接字符串的写法,跟以往在winfo ...
- ANE-调用原生组件横屏定位问题
当我们的应用是横的时候,利用ANE调用原生组件如果处理不当,掉出来的组件会是竖的.那么我么要怎么做才能免去自己手动旋转组件这个破事呢.其实很简单 webView = [[UIWebView alloc ...
- 调用阿里云API 的demo示例（java/python）
Java 示例 // 创建DefaultAcsClient实例并初始化 DefaultProfile profile = DefaultProfile.getProfile(vo.getAliRegi ...
- java invoke(转摘)
JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法:这种动态获取的以及动态调用对象的方法的功能称为java语言的反射机制 ...
- AcDbTable表格实体的简单例子
例子是创建一个含有表格实体的块定义 效果如下(手动插入的块) 源代码如下,简单示意,采用了我不是很熟悉的智能指针创建实体对象,代码仅供参考 AcDbObjectPointer<AcDbTable ...