Open
Bug 1327365
Opened 8 years ago
Updated 3 years ago
Element contents aren't properly clipped with border-radius
Categories
(Core :: Graphics, defect, P3)
Core
Graphics
Tracking
()
NEW
People
(Reporter: arni2033, Unassigned)
Details
(Whiteboard: [gfx-noted])
Attachments
(1 file)
|
380 bytes,
text/html
|
Details |
>>> My Info: Win7_64, Nightly 49, 32bit, ID 20160526082509
STR_1:
1. Open url [1]
2. Look at the <img>
AR: There's 1px thin circle
ER: No visible circle, according to the styling
[1]
data:text/html,<!DOCTYPE html><img alt="" src="asdf:asdf"><style>
img{
background:gray;
border-radius:50px;
height:100px;
width:100px;
display:block;
position:relative;
overflow:hidden;
}
/**/
img::after{
content:" ";
display:block;
position:absolute;
top:0px;
left:0px;
width:100px;
height:100px;
background:white;
border-radius:50%;
}
/**/
|
||
Comment 1•8 years ago
|
||
|
|
||
Comment 2•8 years ago
|
||
This doesn't seem to be pseudo-element specific, not <img> tag related. The testcase above shows a more general case.
It seems clip is not perfect with border-radius. Not sure whether this is an issue of layout or graphics.
Summary: Element contents aren't properly clipped with overflow:hidden; (::after pseudoelement has smaller size) → Element contents aren't properly clipped with border-radius
|
|
||
Comment 3•8 years ago
|
||
My guess is that some anti-aliasing involves here, so put it in Graphics. Feel free to change back to Layout if you find something wrong is passed from Layout code.
Component: Layout → Graphics
|
||
Updated•8 years ago
|
Priority: -- → P3
Whiteboard: [gfx-noted]
|
||
Updated•3 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•