我的网站上的抽屉里隐藏着一些内容。打开抽屉时,会使用CSS过渡将其拉下来。
这对我来说在所有平台上都运行良好 - Chrome,Firefox和Windows上的IE浏览器 - 但是一位同事在OSX上遇到了Chrome的问题,其中转换似乎是在远处绘制线条。
以下是一个示例页面:http://nonaynever.net?preview_theme=Minimal2014
这是问题的截图:http://cl.ly/WvCE
CSS
#dock {
margin: 0 0 -20px 0;
height: 0px;
width: 100%;
clear: both;
overflow: hidden;
opacity: 0;
transition: all 0.5s ease-out 0s;
}
我只是一个爱好编码器,所以可能会遗漏一些显而易见的错误。有什么建议吗?
答案 0 :(得分:0)
这似乎是由opacity: 0;
上的#dock
引起的并由transition
触发的错误。需要opacity
吗?
这是一个错误修复:
CSS
#dock {
margin: 0 0 -20px 0;
height: 0px;
width: 100%;
clear: both;
overflow: hidden;
/* opacity: 0; */
transition: all 0.5s ease-out 0s;
}
或强>
如果您确实希望尽可能保持不透明度转换,因为这似乎只是一个webkit错误:
仅使用-webkit-opacity: 1;
取消webkit浏览器的不透明度。
CSS
#dock {
margin: 0 0 -20px 0;
height: 0px;
width: 100%;
clear: both;
overflow: hidden;
opacity: 0;
-webkit-opacity: 1;
transition: all 0.5s ease-out 0s;
}