Chrome转换正在绘制鬼线

时间:2014-08-06 11:22:33

标签: css google-chrome

我的网站上的抽屉里隐藏着一些内容。打开抽屉时,会使用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;
}

我只是一个爱好编码器,所以可能会遗漏一些显而易见的错误。有什么建议吗?

1 个答案:

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