Bug 81494 - CSS3 border-radius bug with border, padding, position:relative and any child element
Summary: CSS3 border-radius bug with border, padding, position:relative and any child ...
Status: RESOLVED DUPLICATE of bug 77572
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P1 Major
Assignee: Nobody
URL: http://jsfiddle.net/laukstein/y2jKH/1...
Keywords:
Depends on:
Blocks:
 
Reported: 2012-03-18 23:13 PDT by Binyamin
Modified: 2012-07-25 23:42 PDT (History)
2 users (show)

See Also:


Attachments
Child element must nicely much to parent element border-radius including border and padding. (5.30 KB, image/png)
2012-03-18 23:13 PDT, Binyamin
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Binyamin 2012-03-18 23:13:44 PDT
Created attachment 132547 [details]
Child element must nicely much to parent element border-radius including border and padding.

Referring to: http://code.google.com/p/chromium/issues/detail?id=99364

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 not before this style properties how it would be expected to be.

Browsers with the same bug:
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 with padding
Opera 11.61 has bug with with border, padding and overflow

Chrome 19.0.1073.0 canary and Safari 5.1.4 has serious bug on using position:relative to the parent element - 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/)

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).
Comment 1 Shane Stephens 2012-03-21 20:25:45 PDT

*** This bug has been marked as a duplicate of bug 77572 ***
Comment 2 Binyamin 2012-07-25 23:42:54 PDT
Still not solved on Chrome 22.0.1217.0 canary.