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.

See updated fiddle: http://jsfiddle.net/nj3xf/18/

$("#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

1
1

answered Nov 17 '13 at 08:52

cherouvim

31,725
15
104
153

Thank you. Your answer was spot on – foklepoint Nov 17 '13 at 09:40

score 0 · Answer 2 · answered Jan 18 '23 at 00:31

0

You can minimize the bugginess if you set the containers to a higher z-index than the child div. It still affects the border property slightly, but it's much less noticeable.

answered Jan 18 '23 at 00:31

jdeut

19
4

This should be a comment, not an answer. – CreepyRaccoon Jan 19 '23 at 08:54

Div leaking through corner during transitions

2 Answers2