1

Fiddle: http://jsfiddle.net/e8GR6/11/ (updated)

I have rounded the corners of a relatively positioned outer div (which must remain realtively positioned - that is important). I have hidden the overflow of that div, so that the image and inner div contained within have their corners rounded as well.

Works great EXCEPT in Safari. View the above fiddle in anything but Safari and it looks great, view it in Safari and the inner div doesn't have rounded corners. I have fixed the image to have rounded corners by specifically rounding it's corners. However the inner div will animate in the final site, so I can't just cut it's corners too. As far as I can tell, I need the overflow-hidden to work in Safari like it does in the other browsers, or I need an efficient work-around. Any ideas? jQuery is an option, but I prefer a non-javascript solution.

Solution: Looks like it is a bug in webkit. My solution will be to just fade the div out before it becomes noticeable, but for posterity: webkit.org/blog/181/css-masks. a webkit css mask would be able to knockout those pesky corners for me if fading wasn't a viable option.

fildred13
  • 2,280
  • 8
  • 28
  • 52

2 Answers2

1

Apply a border radius to the left and right bottom of the div that pops up. and shorten the width to match its container. You will get a rounded corner you are looking for. I updated your fiddle:

http://jsfiddle.net/e8GR6/10/

a couple things were hurting you. Your width was bigger then the container so you wouldnt see the end of the child div since overflow is hidden. I would use box-sizing: border-box; and set your width: 100%;

-webkit-background-clip: padding-box; 
  -moz-background-clip:    padding; 
  background-clip:         padding-box;

will address address the top portion not being clipped.

Davidicus
  • 716
  • 6
  • 16
  • That works as the inner div is sliding up, but when it slides down the animation is ugly because the un-rounded top corners clearly slide "out" of the image. It is jarring and imperfect. View the production site that I linked to in Safari, you'll see what I mean when you mouseOut from one of the divs. – fildred13 Jan 10 '14 at 17:19
  • @Davidicus - here is your fiddle with the OP's js added: http://jsfiddle.net/e8GR6/12/ you can see the problem in Safari, when the div slides down, the top corners don't disappear "inside" the parent div. – QuestionMarks Jan 10 '14 at 17:35
1

Change the thumb_overlay width to 153px, and add webkit definitions for border-bottom-left-radius and border-bottom-right-radius.

-webkit-border-bottom-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;

Fiddle.

QuestionMarks
  • 246
  • 3
  • 24
  • See my comment on Davidicus' answer, as yours is the same. Useful, and almost passable, but I'm going for perfect. – fildred13 Jan 10 '14 at 17:19
  • I updated the fiddle to include my JS. Should make it clear why the top corners are an ugly annoyance. – fildred13 Jan 10 '14 at 17:29
  • Yeah I see it now. It's odd, it looks like when the div slides up, there is no problem, but when it slides down, those top corners don't disappear "inside" the other div, they continue downward. I'll play with it a bit more. – QuestionMarks Jan 10 '14 at 17:34
  • I think it is an illusion. When it slides up there is also a fade-in, when it slides out there is no fade. It is probably just too transparent to see during the slide up. I COULD fade it out as it slides away, but I want to know how to fix the problem in a less hack-y way. – fildred13 Jan 10 '14 at 17:35
  • It's definitely behaving odd. Here is a fiddle where I slowed down the slide speed and changed the opacity so we could see it better. Notice how on the up-slide, it starts outside the parent, then kind of "snaps" to the border-radius? http://jsfiddle.net/e8GR6/15/ – QuestionMarks Jan 10 '14 at 17:44
  • I'm thinking it may be a bug. Here's a thread from a few years ago that is pretty similar: http://stackoverflow.com/questions/7730807/chrome-safari-loses-rounded-corners-during-a-jquery-slide-transition – QuestionMarks Jan 10 '14 at 17:47
  • I slowed it way wayyyy down to 10000 and yeah, that is the strangest thing. It's like the top is broken, the rest isn't. – fildred13 Jan 10 '14 at 17:51