Webkit overflow issue on border-radius and transform

Question

For some reason, an image is not hidden on overflow in a border-radius box when there is an element after it with a transform rule or when the image is absolute positioned. It only appears on the second or further elements.

I made an example of this issue on Jsfiddle: http://jsfiddle.net/033o1zg3/6/

Looks like a webkit bug, or what i'm doing wrong?

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;
    }

Not really, but I think you forgot to include font-awesome, that is attaching a transform event to the class "fa-spin". — Royw
FWIW, this appears to be a bug in WebKit. I've simplified your test case and submitted the bug to the WebKit team: bugs.webkit.org/show_bug.cgi?id=140835 — Alex W

Royw Royw · Accepted Answer · 2014-12-12T10:43:27

Ok, found the solution on How to make CSS3 rounded corners hide overflow in Chrome/Opera

Looks like a bug in webkit. The only thing is that you need to add this in the wrapper div. In my case .circle.

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

Webkit overflow issue on border-radius and transform

2 Answers