Rounded borders are rendered at a reduced resolution on large elements
Categories
(Core :: CSS Parsing and Computation, defect)
Tracking
()
People
(Reporter: k, Unassigned)
Details
Attachments
(1 file)
|
4.67 KB,
image/png
|
Details |
screenshot
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:154.0) Gecko/20100101 Firefox/154.0
Steps to reproduce:
Create a local HTML file with the following content and open it in Firefox.
<html>
<head>
<style>
#box {
border: 1px solid black;
border-radius: 100px;
height: 10000px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
Observed behavior:
- The issue occurs when either the width or height of an element becomes sufficiently large.
- The longer the element, the coarser the rounded border is rendered.
- The issue is independent of the
border-radiusvalue. For example, it is also visible withborder-radius: 7px, where each rounded corner appears as if rendered with a coarse pixel grid. - The same issue also occurs with
outline. transform: scale()does not trigger the issue; only the actual element size matters.- On my system, the issue starts to become noticeable when the longer side reaches approximately 2257 CSS pixels at 100% page zoom. At 200% page zoom, it starts at approximately half that size, suggesting that the threshold depends on device pixels rather than CSS pixels.
Actual results:
Rounded borders appear to be rendered at a much lower resolution once an element exceeds a certain size, producing visible block-like artifacts.
This can also be observed on real web pages that contain very large bordered elements. Tall elements that extend beyond the viewport make the issue particularly noticeable.
Expected results:
Rounded borders should remain smoothly anti-aliased regardless of the element's dimensions.
Additional information
The issue reproduces with a local HTML file.
The issue reproduces in Firefox 154 Beta but does not reproduce in Firefox 155 Nightly on the same machine, suggesting that it may already have been fixed.
|
||
Comment 1•7 days ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
Description
•