css - border-radius 和 transform 的 Webkit 溢出问题

Question

出于某种原因，当图像后面有一个具有变换规则的元素或图像是绝对定位时，图像不会隐藏在边界半径框中的溢出上。它仅出现在第二个或更多元素上。

我在 Jsfiddle 上做了一个关于这个问题的例子:http://jsfiddle.net/033o1zg3/6/

看起来像 webkit 错误，或者我做错了什么？

html

    <a href="#">
        <div class="circle">
            <img alt="logo" src="http://lorempixel.com/g/400/200">
        </div>
        <div>
            <p data-url="/api/locationdata/location-total/1"><i class="fa fa-circle-o-notch fa-spin"></i></p>
        </div>
    </a>
    <a href="#">
        <div class="circle">
            <img alt="logo" src="http://lorempixel.com/g/400/200">
        </div>
        <div>
            <p data-url="/api/locationdata/location-total/1"><i class="fa fa-circle-o-notch fa-spin"></i></p>
        </div>
    </a>

CSS

   a {
        float: left;
        width: 150px;
        background: #ccc;
        margin: 10px;
    }
    .circle {
        width: 100px;
        height: 100px;
        display: block;
        margin: 0 auto;
        position: relative;
        top: 0px;
        overflow: hidden;
        margin-top: -30px;
        border-radius: 100%;
        border: 3px solid #bcbf00;
    }
    .circle img {
        height: 100%;
        position: absolute;
        top: -9999px;
        left: -9999px;
        bottom: -9999px;
        right: -9999px;
        margin: auto;
    }
    p {
        width: 100%;
        text-align: center;
    }

Answer 1

好的，在 How to make CSS3 rounded corners hide overflow in Chrome/Opera 上找到了解决方案

看起来像是 webkit 中的错误。唯一的问题是您需要将其添加到包装器 div 中。在我的例子中.circle。

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);