![[philiptellis]](https://en.gravatar.com/userimage/3079306/f13167d69aa4e1cb5e5f131af4e38e3e.jpeg)
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.
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.
Update 2016-10-28: This appears to be fixed on the latest versions of Chrome, Firefox, Safari and Opera:
11 comments :
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.
nope, it's not fixable in userspace, needs the browser to be fixed
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!
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.
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.
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
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.
Surprised this bug is still around. Makes some layouts impossible without a crazy combination of static positioning sub-elements.
Unfortunately the bug still exists for all these years
still here!
QupZilla 1.6.0 / WebKit 537.21 / Linux : it work's
Firefox 50.0.2 / Linux : it work's
Chrome 49.0.2623.110 / Linux : it work's
Chromium 49.0.2623.108 / Linux : it work'S
Opera 12.16 / Linux : don't works, the text still shows
Post a Comment