[philiptellis] /bb|[^b]{2}/
Never stop Grokking


Saturday, April 09, 2011

overflow:hidden, border-radius and position:absolute

In my last post, I showed off some CSS fun with border-radius and overflow:hidden. Truth be told, that post started out about a bug with WebKit based browsers in relation to those attributes, but when I got down to writing the post, I couldn't reproduce the bug. Today, while trying to animate it, I managed to isolate the problem, and it turns out that I'm not the only one.

The problem in brief is that the contents of a container with overflow:hidden will still overflow its border if you have border-radius set and position set to anything other than static. Bug 50072 on WebKit describes a similar issue in more detail, and I've posted my comments at the bottom of that bug. I've created a minimal test case on JSFiddle. This is what it looks like on a webkit based browser:
[WebKit overflow bug with border-radius]
Like I said, the problem only shows up when you set the container's position style attribute to something other than static (which is the default).

I've tested in the latest versions of Firefox, Chrome, Safari and Opera, and Firefox is the only one that renders it correctly.

Now before you go asking me to test on the latest WebKit, rest assured that it's compiling as I write this. I'll try and submit a fix if it still exists and I can figure out what needs patching, but given that position:static works correctly, it may just be a matter of seeing what's different with those two flows.

8 comments :

Jason Lewis
October 12, 2011 1:22 PM

Did you ever get this problem sorted? I'm having a similar problem at the moment with border-radius and overflow being hidden. I might just have to use square borders, however I was hoping to use rounded.

Philip
October 12, 2011 1:32 PM

nope, it's not fixable in userspace, needs the browser to be fixed

Jason Lewis
October 12, 2011 10:35 PM

Ah right then. That's no good. Thanks for the insightful post though. Was one of the first pages I visited and answered my question straight away.

Cheers!

Tom
November 03, 2011 7:48 PM

If you use ":before" and basically add a layer over your absolute element style you can create a mask to overcome this problem. Set the yourStyle:before to have the radius border you want, and then set the border size to mask off the corners. The border colour needs to be the same as your background (won't work if you have an image for a background) width and height to 100%, z-index to higher than you're original style (or the z-index being applied by a library animation), position to absolute. top and left will need to be set to a minus value that's equal to your border size.

Not ideal, but it's a fix.

Stan
January 09, 2012 11:17 AM

This works flawless in IE 9 btw. Microsoft gets this one. Seems like people are just neglecting IE of old habit, but it seems they are actually the ones doing something right, at least in this case!

Very positive surprise.

Tom J Nowell
August 13, 2012 9:47 AM

Instead of using the authenticator app, if google is set to text you the code itll appear as a banner at the top so you have both the code and the code entry box on the screen at once

Philip
August 13, 2012 2:00 PM

Hi Tom, I'm guessing your comment was meant for http://tech.bluesmoon.info/2012/06/ios-google-wifi-and-2-factor-auth.html

I did initially have google set up to text me the code instead of using the Authenticator app, however, it turns out that the number of times I'm outside the country (and paying roaming charges) is far more than the number of times I'm near a GoogleWifi hotspot, so I switched to the authenticator instead.

Zeh
September 05, 2012 5:30 PM

Surprised this bug is still around. Makes some layouts impossible without a crazy combination of static positioning sub-elements.

Post a Comment