css - Chrome 过渡正在绘制虚线

Question

我有一些内容隐藏在我网站的抽屉里。当您打开抽屉时，会使用 CSS 转换将其拉下。

这对我来说在所有平台上都很好——Windows 上的 Chrome、Firefox 和 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

这似乎是由 #dock 上的 opacity: 0; 引起并由 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;
}