具有隐藏溢出和边界半径的父级子项的动画变换

Question

我已经在网络浏览器中看到了一些涉及overflow:hidden和border-radius的错误的提及，但似乎没有一个解决方案对我有用。

我已将相关代码放在此处：http://codepen.io/jolora/pen/MadgQm

悬停过渡效果在Safari和Firefox中运行良好但在Canary中出现问题（v49。Chrome v46工作正常）。

如果我从.service删除overflow:hidden规则，则悬停按预期工作。我正在使用模糊滤镜，所以我需要以某种方式剪切模糊 - 我不希望它渗出父母的边缘。

截图：

• 悬停时的Safari（应该看起来像）：

• 悬停时的金丝雀（.service的背景仅在0.25秒的过渡期间显示在一个正方形中）：

非常感谢任何帮助。谢谢！

Answer 1

您看到了什么问题以及它应该是什么样的？它在Chrome中看起来不错（不是Canary） 溢出：隐藏 -

没有溢出：隐藏 -