Element contents aren't properly clipped with border-radius

NEW
Unassigned

Status

()

Product:
Core
Component:
Graphics
P3
normal
Reported:
a year ago
Modified:
a year ago

People

(Reporter: arni2033, Unassigned)

Tracking

Version:
Trunk
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [gfx-noted])

Attachments

(1 attachment)

testcase
380 bytes, text/html
Details
(Reporter)

Description

•
a year ago 
>>>   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%;
}
/**/
 (Reporter)

Updated

•
a year ago
Component: Untriaged → Layout
Product: Firefox → Core
 (Reporter)

Updated

•
a year ago
No longer blocks: 1277113

Comment 2

•
a year 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

•
a year 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
Priority: -- → P3
Whiteboard: [gfx-noted]
You need to log in before you can comment on or make changes to this bug.