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, Dec 04 '14 at 18:29
FWIW, this appears to be a bug in WebKit. I've simplified your test case and submitted the bug to the WebKit team: https://bugs.webkit.org/show_bug.cgi?id=140835 — Alex W, Jan 23 '15 at 21:28

score 0 · Accepted Answer · edited May 23 '17 at 11:53

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

score -1 · Answer 2 · edited Aug 26 '16 at 08:45

-1

try transform-style: preserve-3d

edited Aug 26 '16 at 08:45

Nikolay Mihaylov

3,868
8
27
32

answered Aug 26 '16 at 08:24

xiaozhu

1

This answer turned up in the low quality review queue, presumably because you don't provide any explanation of the code. If this code answers the question, consider adding adding some text explaining the code in your answer. This way, you are far more likely to get more upvotes — and help the questioner learn something new. – lmo Aug 27 '16 at 16:43
maybe the answer it too sample, just add ** transform-style: preserve-3d;** to the class circle; it doesn't work in jsfiddle, please try it in browser – xiaozhu Sep 28 '16 at 07:26

Webkit overflow issue on border-radius and transform

2 Answers2