Chrome转换正在绘制鬼线

Question

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

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

Answer 1

这似乎是由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;
}