Webkit border radius combined with css3 translate3D bleeding

Question

I'm struggling with a problem on Webkit based browsers where if I add a border radius to a div and then apply -moz-translate3d to a ul inside (this is because on the original example I'm using flexslider slideshow), the border radius does not apply and bleeds through the container.

To clearly understand what I'm talking about here's a fiddle example about the problem. If I remove the translate3d property, the border radius is applied.

HTML:

<div class="wrapper">
    <ul>
        <li>
            <div class="caption"><p>Test</p></div>
        </li>
        <li>
            <div class="caption"><p>Test</p></div>
        </li>
        <li>
            <div class="caption"><p>Test</p></div>
        </li>
        <li>
            <div class="caption"><p>Test</p></div>
        </li>
    </ul>
</div>

CSS:

.wrapper {
    border-radius: 20px;
    position: relative;
    width: 500px;
    height: 200px;
    overflow: hidden;
}

.caption {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.8);
    padding: 2rem;
    -webkit-box-sizing: border-box;
    width: 100%;
    height: 3rem;
    color: #fff;
}

ul {
    width: 800%;
    -webkit-transform: translate3d(-500px, 0, 0); 
}

li {
    float: left;
    width: 500px;
    height: 200px;
    background-color: #000;
    position: relative;
}

.caption p {
    color: #fff;
}

http://jsfiddle.net/R5L3K/12/

Tested it both on Chrome latest version on Mac and Windows.

Thanks in advance!

Harvell

Looks like the rules are conflicting. What exactly are you trying to achieve as an end result? – Voltmer

I just need to make the borders rounded, but using the translate3d property :) – Harvell

I get your question but why do you need that property? Looks like you're just moving the UL over - why not just use position:relative; left: -500px; ? – Voltmer

Because is not under my control actually, I am using the flexslider plugin that uses this property to make the slides work with CSS3 and only on Webkit browsers this is not working properly. – Harvell

Answer 1

I have answered this question before. It is a webkit bug.

Add this code to the same selector you are adding border radius too

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

http://jsfiddle.net/R5L3K/14/

Old answer source flexslider border-radius does not wrap image in Chrome, Safari, but will in Firefox

Antipas

You know, it's the weirdest thing, I did see that question and tried it before but didn't work. Now it does, thanks! – Harvell

I have no idea how it works. But it does. Nice quest for evening time. – Heterophyte

Answer 2

The bleeding stopped, which is great! I am using this for a box, that I am adding an arrow to with :before. However, this seems to somehow magically make the arrow from the :before label disappear. Is there any way to fix this?

span {
position: relative;
border-radius: 5px;
-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

span:before {
content: '';
width: 0;
height: 0;
top: 29px;
right: 100%;
visibility: hidden;
position: absolute;
border-width: 9px; /* 0.8em */
border-style: solid;
border-color: transparent rgba(000,000,000,0.85) transparent transparent;
}

Bradberry

Can you summarize what you changed? – Octoroon

I think I figgured out the problem, just not, how to solve it. Since the arrow lies outside de box, it vanishes. It's just like using overflow: hidden. – Bradberry