Project: chromium Issues People Development process History Sign in
New issue
Advanced search Search tips
Starred by 12 users
Status: Available
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux, Android, Windows, Chrome, Mac
Pri: 3
Type: Bug



Sign in to add a comment
CSS3 border-radius bug with border, padding and any child element
Reported by laukst...@gmail.com, Oct 6 2011 Back to list
ChromeFrame version: 14.0.835.202 (Official Build 103287) m

Related URL: http://jsfiddle.net/laukstein/y2jKH/show/ (code in http://jsfiddle.net/laukstein/y2jKH/)

Steps to reproduce the issue:
Browser does not render CSS3 border-radius child element in right way. It falls on using border and padding for parent element.

What do you expect to happen?
Child element must nicely much to parent element border-radius including border and padding. I have attached image that might describe better this bug.

What do you see instead?
Child element renders parent element border-radius after the padding and border and not before this style properties how it would be expected to be.

Browsers with the same bug:
Chrome 14, Safari 5.1 has bug with border and padding, IE9, FF7 with padding, Opera 11.51 with border, padding and overflow.
Related bug posted in http://stackoverflow.com/questions/5421622 with overflow:hidden and no border or padding, demo http://jsfiddle.net/zScKW/show/ (works fine on FF7 and IE9).
In case you might ask me to open the same ticket in webkit.org too, I prefer if you'll do it for me.
 
css3-border-radius-bug-with-child-element.png
5.3 KB View Download
By the way Chrome 14 and Safari 5.1 has serious bug on using to parent element position:relative - child element ignores parent style property border-radius at all. Demo http://jsfiddle.net/laukstein/y2jKH/1/show/
Edit mode http://jsfiddle.net/laukstein/y2jKH/1/
Comment 2 by dhw@chromium.org, Mar 19 2012
Labels: -Feature-ChromeFrame Area-WebKit WebKit-CSS
Remember, CSS and Safari problems are likely WebKit bugs.  Did you submit this bug
report to https://bugs.webkit.org ?
Comment 3 by laukst...@gmail.com, Mar 19 2012
I just opened the bug under https://bugs.webkit.org/show_bug.cgi?id=81494

Bug status:
Safari 5.1.4 has bug with border and padding
Chrome 19.0.1073.0 canary, FF Nightly 14.0a1 (2012-03-18), IE9 has bug with padding
Opera 11.61 has bug with border, padding and overflow
Chrome 19.0.1073.0 canary, Safari 5.1.4 has bug with position:relative to the parent element - child element ignores parent style property border-radius at all, http://jsfiddle.net/laukstein/y2jKH/1/show/
Comment 4 by laukst...@gmail.com, Jul 26 2012
Still not solved on Chrome 22.0.1217.0 canary.
Related bug https://bugs.webkit.org/show_bug.cgi?id=77572
Comment 5 by Deleted ...@, Aug 28 2012
Guys, give us a break.. Not only is this not-fixed, the entire border-radius is incredibly buggy in Chrome (Mac). Border-radius on a child breaks completely when combined with opacity which makes for some pretty shitty animations in my application. This is already fixed in Safari (I'm using 6.0) so now might be a good time to start working on this!
Comment 6 by Deleted ...@, Jan 4 2013
Real shame to still see this occurring after so long.
Project Member Comment 7 by bugdroid1@chromium.org, Mar 10 2013
Labels: -Area-WebKit -WebKit-CSS Cr-Content Cr-Content-CSS
Project Member Comment 8 by bugdroid1@chromium.org, Apr 6 2013
Labels: -Cr-Content Cr-Blink
Project Member Comment 9 by bugdroid1@chromium.org, Apr 6 2013
Labels: -Cr-Content-CSS Cr-Blink-CSS
Status: WontFix
Can't reproduce this, likely fixed at some point. Please comment or refile if you're still seeing this issue.
As you can see http://jsfiddle.net/laukstein/y2jKH/show/ the padding ignores border-radius and image/background in corners is copped after the padding and not before. The same problem seen on all browsers. The problem detailed in image https://chromium.googlecode.com/issues/attachment?aid=993640000000&name=css3-border-radius-bug-with-child-element.png&token=ABZ6GAf0ykmlK-_msc_CzFoIVdJ80oTaFA%3A1428925300182&inline=1
What do the specs say about this?
Ahh, I now see that you are expecting the padding to be rounded.

> The same problem seen on all browsers.

Is the behavior you expect detailed in a specification?
http://www.w3.org/TR/css3-background/#corner-clipping
"A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve."

As far as I fallow - padding also must be rounded. You can write www-style@w3.org and Tab Atkins to ask more details.
Here is the answer for "Is padding expected to be rounded too?" http://lists.w3.org/Archives/Public/www-style/2015Apr/0252.html

> Yes. As quoted:
> 
>   "Other effects that clip to the border or padding edge (such as 
> ‘overflow’
>    other than ‘visible’) also must clip to the curve."

What means the issue is still relevant on Chrome, WebKit, Firefox and IE.
Here is clear, updated test-case http://jsbin.com/fezife/2/quiet
Labels: -OS-Windows OS-All Cr-Blink-Paint
Status: Untriaged
http://www.w3.org/TR/css3-background/#corner-shaping explains that the padding edge is also curved.
Comment 18 by shans@chromium.org, Apr 29 2015
Labels: -Cr-Blink-CSS
Cc: shans@chromium.org
Labels: Cr-Blink-Layout-BackgroundBorder Cr-Blink-Layout
Owner: schenney@chromium.org
Status: Available
shans@, did you remove the CSS flag because you know that the property is set correctly and the layout/paint code is ignoring it?
Comment 20 by e...@chromium.org, Nov 30 2015
Our current behavior matches firefox but not the spec.
Labels: -Cr-Blink
Removing Cr-Blink from issues that already have Cr-Blink sub-label set.
Components: -Blink>Layout>BackgroundBorder
Comment 23 by shans@chromium.org, Jun 20 2016
(belated) @schenney yes, that's correct.

I don't think this is Layout either - it seems like the regions are just being painted incorrectly.
Comment 24 by e...@chromium.org, Aug 23 2016
Components: -Blink>Layout
(over to paint as per comment 23)
Project Member Comment 25 by sheriffbot@chromium.org, Aug 24
Labels: Hotlist-Recharge-Cold
Status: Untriaged
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue.

Sorry for the inconvenience if the bug really should have been left as Available. If you change it back, also remove the "Hotlist-Recharge-Cold" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Labels: -Pri-2 -Hotlist-Recharge-Cold -OS-All PaintTeamTriaged-20170824 BugSource-User OS-Android OS-Chrome OS-Linux OS-Mac OS-Windows Pri-3
Owner: ----
Status: Available
Edge and Firefox still do what we do, so downgrading the priority.

This would be very hard to fix. We would need to add clips for the contents distinct from those of the inner border. In t he composited child case we would need separate graphics layers for the padding and the contents in order to have masks for the border radius.
> Edge and Firefox still do what we do, so downgrading the priority.

@schenney, FYI Chrome can make an exception and be the first on fixing Web.
Oh yes, I just wish it were easier.
Sign in to add a comment