Div leaking through corner during transitions

Question

I built a carousel with the following design: http://jsfiddle.net/nj3xf/13/

Why is the div leaking through? Can somebody explain? and possibly offer a fix? I know it may have to do with the overflow:hidden

You should put the border/border-radius on the elements instead of the parent imo. — mash, Nov 17 '13 at 08:04
The problem with that is that the design looks really weird then. — foklepoint, Nov 17 '13 at 08:06
Because of the red background? Just move the radius and border styles to the item and remove the red background. — ralph.m, Nov 17 '13 at 08:48

score 2 · Accepted Answer · edited May 23 '17 at 12:28

2

Rendering round corners over CSS animations is buggy. A safe workaround is to animate the slides yourself.

$("#move").click(function () {
    $('.slider').animate({left: "-=104px"});
});

Edit: Improved example: http://jsfiddle.net/nj3xf/19/. Avoid display:inline-block because it adds some unwanted margin between the slider items. See display: inline-block extra margin and Unwanted margin in inline-block list items for more info.

edited May 23 '17 at 12:28

Community

answered Nov 17 '13 at 08:52

cherouvim

1 Answers1