Css 铬过渡正在绘制鬼影线

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

这对我来说在所有平台上都很好——在Windows上的Chrome、Firefox和IE——但是一位同事在OSX上遇到了Chrome的一个问题，在这一点上，过渡似乎一直在画线

下面是一个示例页面：

下面是问题的屏幕截图：

CSS

---

我只是一个业余编码员，所以可能会遗漏一些明显的错误。有什么建议吗？

这似乎是由于

不透明度：0打开
#停靠
，并通过
转换触发。是否需要
不透明度

这是一个错误修复：

CSS


或

如果您确实希望尽可能保持不透明度转换，因为这似乎是一个仅限webkit的错误：

仅使用
-webkit opacity:1取消webkit浏览器的不透明度

CSS

谢谢这似乎有效。不透明度是不必要的，所以我把它去掉了。我们只是跳了一支舞-谢谢！！令人惊叹的也可以尝试
-webkit不透明性：1后<代码>不透明度：0。这样你就可以在Chrome浏览器出现问题时取消它，而把它留给其他浏览器。
#dock {
   margin: 0 0 -20px 0;
   height: 0px;
   width: 100%;
   clear: both;
   overflow: hidden;
   opacity: 0;
   transition: all 0.5s ease-out 0s;
}

#dock {
   margin: 0 0 -20px 0;
   height: 0px;
   width: 100%;
   clear: both;
   overflow: hidden;
   /* opacity: 0; */
   transition: all 0.5s ease-out 0s;
}

#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;
}