Safari圆角无法隐藏动画期间隐藏的溢出答案

【问题标题】：Safari rounded corners fail to conceal with overflow hidden during animationSafari圆角无法隐藏动画期间隐藏的溢出
【发布时间】：2014-01-10 16:43:13
【问题描述】：

小提琴：http://jsfiddle.net/e8GR6/11/（更新）

我已经对相对定位的outer div 进行了圆角处理（必须保持实际定位 - 这很重要）。我已经隐藏了那个 div 的溢出，所以其中包含的 image 和 inner div 的角也被圆角了。

在 Safari 中除外。在 Safari 之外的任何地方查看上面的小提琴，它看起来很棒，在 Safari 中查看它，inner div 没有圆角。我已将image 固定为圆角，特别是圆角。但是inner div 将在最终站点中进行动画处理，所以我也不能只是偷工减料。据我所知，我需要像在其他浏览器中一样在 Safari 中使用溢出隐藏功能，或者我需要一种有效的解决方法。有任何想法吗？ jQuery 是一种选择，但我更喜欢非 javascript 解决方案。

解决方案： 看起来这是 webkit 中的一个错误。我的解决方案是在 div 变得明显之前将其淡出，但为了后代：webkit.org/blog/181/css-masks。如果褪色不是一个可行的选择，那么一个 webkit css 掩码可以为我消除那些讨厌的角落。

【问题讨论】：

标签： css safari overflow

【解决方案1】：

将 thumb_overlay 的宽度更改为 153px，并为 border-bottom-left-radius 和 border-bottom-right-radius 添加 webkit 定义。

-webkit-border-bottom-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;

Fiddle.

【讨论】：

请参阅我对 Davidicus 答案的评论，因为您的答案是一样的。有用，而且几乎可以通过，但我会追求完美。
我更新了小提琴以包含我的 JS。应该清楚为什么顶角是一个丑陋的烦恼。
是的，我现在看到了。奇怪的是，看起来当 div 向上滑动时没有问题，但是当它向下滑动时，那些顶角并没有消失在另一个 div 的“内部”，它们继续向下。我会多玩一点。
我认为这是一种错觉。当它向上滑动时也有淡入，当它滑出时没有淡入。在向上滑动期间，它可能太透明而无法看到。我可以在它滑开时淡出它，但我想知道如何以一种不那么老套的方式解决这个问题。
它的行为肯定很奇怪。这是一个小提琴，我放慢了滑动速度并更改了不透明度，以便我们可以更好地看到它。请注意在向上滑动时，它是如何从父级之外开始的，然后有点“捕捉”到边界半径？ jsfiddle.net/e8GR6/15

【解决方案2】：

对弹出的 div 的左右底部应用边框半径。并缩短宽度以匹配其容器。你会得到一个你正在寻找的圆角。我更新了你的小提琴：

http://jsfiddle.net/e8GR6/10/

有几件事伤害了你。你的宽度比容器大，所以你不会看到子 div 的结尾，因为溢出是隐藏的。我会使用box-sizing: border-box; 并设置你的width: 100%;

-webkit-background-clip: padding-box; 
  -moz-background-clip:    padding; 
  background-clip:         padding-box;

将解决顶部未被剪裁的部分。

【讨论】：

这在内部 div 向上滑动时起作用，但是当它向下滑动时，动画很难看，因为未圆角的顶角清楚地从图像“滑出”。这是不和谐和不完美的。查看我在 Safari 中链接到的生产站点，当您从其中一个 div 中鼠标移出时，您会明白我的意思。
@Davidicus - 这是您添加的 OP js 的小提琴：jsfiddle.net/e8GR6/12 您可以在 Safari 中看到问题，当 div 向下滑动时，顶角不会在父级“内部”消失div.