Element contents aren't properly clipped with border-radius

NEW
Unassigned

Status

()

Core
Graphics
P3
normal
a year ago
a year ago

People

(Reporter: arni2033, Unassigned)

Tracking

Trunk
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [gfx-noted])

Attachments

(1 attachment)

(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
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
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.