1793094 - Rounded CSS corners look too thick

Status: UNCONFIRMED

(Core :: Layout, defect)

Description

[Samuel]

Attachment: test.zip

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:104.0) Gecko/20100101 Firefox/104.0

Steps to reproduce:

1. Use a non HiDPI device and don't use GUI scaling, OS doesn't matter
2. Download the attached test.zip and unpack it
3. Open test.html in Firefox
4. In the CSS column, observe the thicker lines at the corners of the boxes at radii above 3 (easiest to see when comparing with the SVG column)

Actual results:

The line at the rounded corners appear thicker in the CSS column than in the SVG column. This is only visible to my eyes when the border-radius is set to larger than 3px. For me, it's easiest to see with 1px black borders. The SVGs look great, and I don't see any issue there.

• I can reproduce the same issue in Firefox on Fedora 36, Windows 11 and macOS 12.6.

• I cannot see any issues on HiDPI devices like my phone, or if I use any sort of zoom to scale things up.

I can see hints of the same issue in other browsers, and Chrome (and Edge) looks worst, see below.

• Google Chrome also has issues when rendering CSS corners, tested on Fedora 36, Windows 11 and macOS 12.6. Rounded corners in SVGs look off in Chrome too.

• Unsurprisingly, just like in Chrome, I can see the issue in Microsoft Edge on Fedora 36, Windows 11 and macOS 12.6.

• Safari on macOS 12.6 looks quite similar to Firefox in my eyes. I refer to the screenshots that I will attach here.

There is also an extended example with 0.5 steps in border radius available, this HTML is commented-out in test.html.

This seems to be a rendering bug to me, perhaps the gamma curve isn't considered when calculating the alpha of these CSS corner pixels?

The SVGs used in this example were created using Inkscape, simple rectangles with Rx and Ry set to different values.

Expected results:

I would expect the line to appear with the same width/thickness along the entire line, even at the rounded corners.

I would also expect CSS to be able to look the same as the SVGs here.

Comment 1

[Samuel]

Attachment: fedora36_chrome_firefox_edge.png

Comparisons between different browsers on Fedora 36.

Comment 2

[Samuel]

Attachment: macOS_12.6_safari_chrome_firefox_edge.png

Comparisons between different browsers on macOS 12.6 (M1).

Comment 3

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

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

Comment 4

[Samuel]

Attachment: Screenshot showing the issue when comparing rounded corners from CSS and SVG

Detailed comparison between rounded corners in SVGs and rounded corners in CSS (with 0.5 steps in border-radius).

Comment 5

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

The severity field is not set for this bug.
:jfkthame, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 6

[Jonathan Kew [:jfkthame]]

I agree that I can see a slight difference in the rendering of the SVG vs CSS examples here, but it's less clear whether one is "correct" and the other "wrong" (and if so, which).

The Inkscape-generated SVGs are cluttered with a lot of inkscape-specific stuff, and use quite different coordinates and scaling, making it difficult to determine whether the ultimately rendered geometry of the rounded corners really is identical between the SVG and CSS examples.

I'd have more confidence in a comparison that uses minimal, "clean" SVGs where we can see that there's a direct correspondence between the SVG geometry and the CSS border, and then check how the final antialiased rendering compares.

Comment 7

[Samuel]

So, to your eyes, the corners of the CSS boxes doesn't appear thicker than the rest of the border-lines?

How do I create “clean” SVGs for a better comparison? Are there tools for this, or are you talking about manually editing the SVG “code” to make it simpler?

Comment 8

[Jonathan Kew [:jfkthame]]

Attachment: Testcase comparing CSS and SVG rounded corners

This example displays a series of CSS-vs-SVG pairs of boxes, with increasing corner radius values.

Note that because CSS borders paint outside the box that defines the geometry (or inside if box-sizing:border-box is used), while SVG paths are painted with the stroke centered on the geometry, to get a valid comparison we have to define SVG geometry that is adjusted by half of the stroke width compared to the CSS box.

With this example, the CSS and SVG renderings look pretty close to identical to my eye on a high-dpi screen (though by magnifying the screen, I can tell there are very slight differences), whereas with the original example from test.zip I could see clear differences; I suspect that a half-stroke-width difference in the effective corner radius may have been the main reason for that.

Capturing screenshots of a low-dpi rendering, I do see a difference between the CSS and SVG results, with the antialiased corner curves tending to look a little darker in the CSS case. I'm not sure I'd call them "too dark", however; if anything, the SVG rounded corners may be a little "weak" to my eye.

Anyhow, I think this at least gives us a more accurate comparison to consider.

Comment 9

[Samuel]

Sorry for the late reply, I agree with you. Thanks for explaining the details here.

Looking at your example on a low-dpi screen, I get the feeling that the CSS corners are "thicker" than the other parts of the CSS box lines. To my eyes, the SVG line widths look uniform and nice.