谷歌浏览器在过渡（Jquery）时无法正确呈现 css 属性（border-radius）。答案

【问题标题】：Google Chrome not rendering css property (border-radius) properly when in transition(Jquery).谷歌浏览器在过渡（Jquery）时无法正确呈现 css 属性（border-radius）。
【发布时间】：2013-03-01 23:31:07
【问题描述】：

我不确定我是否可以在不混淆你们的情况下解释这一点。所以，请检查动画 Gif。

适用于 Firefox 和 IE。我正在使用 TMSlider 0.4.1 进行转换。

【问题讨论】：

图像参考已损坏...

标签： jquery google-chrome css

【解决方案1】：

在你设置了border-radius的div上，你的css是否也设置为

.div{overflow:hidden;}

【讨论】：

.mp-slider { 位置：绝对；顶部：-109px；左：0；对：0；高度：511px；边框半径：55px 55px 0px 0px； -webkit-border-radius：55px 55px 0px 0px； -moz-border-radius: 55px 55px 0px 0px;溢出：隐藏；这是使用的 CSS。
是否可以在您的 mp-slider div 中创建一个包装器，该包装器将作为过渡 div 并在 mp-slider 上保持绝对位置，但内部的新包装器（过渡 div）有一个位置设置为相对同时还隐藏了溢出？绝对位置可能会直接影响这种转换
试过了。。还是不行。我对此有点陌生。我在这里暂时托管了它。 link。你可以检查一下。请原谅我非常糟糕的复制和粘贴编码。我刚开始学习。 :p
这是 -webkit- 的一个问题，特别是因为它不完全支持逻辑。我最好的建议是在包含背景图像的 div 上使用 CSS 选择器 :before 和 :after 来应用 2 个新的背景图像来掩盖过渡期间流血的边缘的可见性。截取您的网站并剪下每个角的必要宽度和高度（在本例中为右上角和左上角）并使用mp-slider:before{background-image:corner.png;position:absolute;left:2px} 当然使用您自己的必要像素来获得必要的结果。快速修复！
我在使用这些 CSS 选择器时的目的是防止将来添加任何新图像时需要为添加的每个图像添加角。您可以继续添加方形图像，并且仍然用:after 和:before 选择器遮盖角落

【解决方案2】：

容器中的“溢出：隐藏”显然有同样的问题。

只有当里面的元素有动画（css3），没有delay时才会出现问题。

解决办法是这个：https://stackoverflow.com/a/27233053/1585052

【讨论】：