1860021 - Dark edges on the corners when using 'border-radius' and 'overflow: hidden' with an underlying dark image.

Status: UNCONFIRMED

(Core :: Graphics: WebRender, defect)

Description

[AjiTae]

Attachment: example-screenshot.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/118.0

Steps to reproduce:

1. A white background.
2. A container with 'border-radius' and 'overflow: hidden'.
3. A black image with 'width: 100%' and 'height: 100%' inside this container.
4. A white div with 'width: 100%', 'height: 100%', and 'position: absolute' inside this container.

Example:
https://codepen.io/ajitae/pen/vYvoKMZ

Example code:
<div class="container">
<div class="overlay"></div>
<img class="background-picture"src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACAAQAAAADrRVxmAAAAGElEQVQYGWMYBaNgFIyCUTAKRsEooDMAAAiAAAE2cKqmAAAAAElFTkSuQmCC">
</div>

<style>
html, body {
background: #fff;
}

.container {
width: 40px;
height: 40px;
border-radius: 20px;
overflow: hidden;
position: relative;
}

.overlay {
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
background: #FFF;
}

.background-picture {
width: 100%;
height: 100%;
}
</style>

Actual results:

Result: Dark edges at the rounded corners of the container.

Expected results:

Expected: A clean white page.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Graphics: ImageLib' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.