Javascript css中带有圆形div的遮罩动画

我正在创建一个类似谷歌材质设计的按钮，带有涟漪效应，但我的动画显示为方形，而我希望它是圆形

这是因为动画的大小大于它所在的div，然后填充外部div的边，使其看起来像一个正方形。有没有办法将外部div本身设置为圆形，因为即使我设置了

边界半径：50%

，div本身（不是在div内创建的形状）仍然是正方形

html:

我原以为给

#按钮
赋予
溢出：隐藏的属性会产生屏蔽效果，但事实并非如此

javascript:

var parent, ink, d, x, y;## Heading ##
$("#imgs #button").click(function(e){
    element = $(this);
    if(element.find(".drop").length === 0)
        element.prepend("<span class='drop'></span>");

    drop = element.find(".drop");
    drop.removeClass("animate");

    if(!drop.height() && !drop.width())
    {
        d = Math.max(element.outerWidth(), element.outerHeight());
        drop.css({height: d, width: d});
    }

    x = e.pageX - element.offset().left - drop.width()/2;
    y = e.pageY - element.offset().top - drop.height()/2;

    //set the position and add class .animate
    drop.css({top: y+'px', left: x+'px'}).addClass("animate");
});

var父项、墨水、d、x、y；#标题##
$（“#imgs#按钮”）。单击（功能（e）{
元素=$（该元素）；
if（element.find（“.drop”）.length==0）
元素。前缀（“”）；
drop=element.find（“.drop”）；
drop.removeClass（“动画”）；
如果（！drop.height（）&&！drop.width（））
{
d=Math.max（element.outerWidth（），element.outerHeight（））；
css（{高度：d，宽度：d}）；
}
x=e.pageX-element.offset（）.left-drop.width（）/2；
y=e.pageY-element.offset（）.top-drop.height（）/2；
//设置位置并添加类。设置动画
css（{top:y+'px'，left:x+'px'}）.addClass（“animate”）；
});

这里是一个工作区，您可以看到上面代码产生的效果。如何更改它，使ripple动画显示为圆形（仅限于圆形按钮）而不是方形（扩展到按钮的边界）？
此问题是由报告的chrome错误引起的。目前还没有解决方案，但有一个简单的解决方案，不会影响美观

您需要向元素添加一个转换：
-webkit-transform:rotate（0.000001deg）它可以小到无法察觉，但这应该足以通过提升元素的绘制顺序来修复它


var父项、墨水、d、x、y；
$（“#imgs#按钮”）。单击（功能（e）{
元素=$（该元素）；
if（element.find（“.drop”）.length==0）
元素。前缀（“”）；
drop=element.find（“.drop”）；
drop.removeClass（“动画”）；
如果（！drop.height（）&&！drop.width（））{
d=Math.max（element.outerWidth（），element.outerHeight（））；
drop.css({
身高：d，
宽度：d
});
}
x=e.pageX-element.offset（）.left-drop.width（）/2；
y=e.pageY-element.offset（）.top-drop.height（）/2；
//设置位置并添加类。设置动画
drop.css({
顶部：y+‘px’，
左：x+‘px’
}).addClass（“动画”）；
});
#按钮{
位置：相对位置；
溢出：隐藏；
高度：56px；
宽度：56px；
边界半径：50%；
-webkit盒阴影：0 1px 5px 0 rgba（50,50,50,0.75）；
-莫兹盒阴影：0 1px 5px 0 rgba（50,50,50,0.75）；
盒影：0 1px 5px 0 rgba（50,50,50,0.75）；
-webkit变换：旋转（0.000001deg）；/*这是重要的一位*/
}
.放下{
高度：56px；
宽度：56px；
显示：块；
位置：绝对位置；
背景：hsl（180,40%，80%）；
边界半径：90%；
变换：比例（0）；
}
.drop.animate{
-webkit动画名称：ripple；
-webkit动画持续时间：0.65s；
-webkit动画计时功能：线性；
}
@-webkit关键帧纹波{
100% {
不透明度：0；
转换：比例（2.5）；
边界半径：90%；
}
}
它通过提升div的绘制顺序来工作。有一条关于bug的评论，解释了导致解决问题的诊断。
#button{
  position: relative;
  overflow: hidden;
  height: 56px;
  width: 56px;
  border-radius: 50%;
  -webkit-box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.75);
   box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.75);
}

.drop{
  display: block;
  position: absolute;
  background: hsl(180, 40%, 80%);
  border-radius: 50%;
  transform: scale(0);
}

.drop.animate {
  -webkit-animation-name: ripple;
  -webkit-animation-duration: 0.65s;
  -webkit-animation-timing-function: linear;
}

@-webkit-keyframes ripple {
  100% {opacity: 0; transform: scale(2.5);}
}

var parent, ink, d, x, y;## Heading ##
$("#imgs #button").click(function(e){
    element = $(this);
    if(element.find(".drop").length === 0)
        element.prepend("<span class='drop'></span>");

    drop = element.find(".drop");
    drop.removeClass("animate");

    if(!drop.height() && !drop.width())
    {
        d = Math.max(element.outerWidth(), element.outerHeight());
        drop.css({height: d, width: d});
    }

    x = e.pageX - element.offset().left - drop.width()/2;
    y = e.pageY - element.offset().top - drop.height()/2;

    //set the position and add class .animate
    drop.css({top: y+'px', left: x+'px'}).addClass("animate");
});