9

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!

Ariel
  • 113
  • 1
  • 1
  • 9
  • Looks like the rules are conflicting. What exactly are you trying to achieve as an end result? – AlienWebguy Jan 23 '13 at 01:11
  • I just need to make the borders rounded, but using the translate3d property :) – Ariel Jan 23 '13 at 01:18
  • 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;` ? – AlienWebguy Jan 23 '13 at 01:22
  • 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. – Ariel Jan 23 '13 at 01:27

2 Answers2

23

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

Community
  • 1
  • 1
2ne
  • 5,766
  • 9
  • 30
  • 51
1

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;
}
gcbenison
  • 11,723
  • 4
  • 44
  • 82
Sebastian
  • 11
  • 1