1753788 - Dashed borders have asymmetric "spikes" at certain zoom levels (or certain OS HiDPI settings), when rendered using WebRender

Status: NEW

(Core :: Graphics: WebRender, defect, P3)

Description

[Daniel Holbert [:dholbert]]

STR:

1. View the attached testcase at 300% zoom (i.e. hold Ctrl and press + 8 times)
   (I'm assuming you have 100% pixel scaling in your OS -- if instead you have HiDPI, the conditions might be different.)

ACTUAL RESULTS:
The dash segments in the dashed border have "jagged spikes" at the top-left and bottom-right corners. There's a single black pixel sticking out of the rectangle at the top-left of each dash, and another pixel or two sticking out at the bottom-right of each dash.

EXPECTED RESULTS:
The dashed border should still look dashed. (If we need to do antialiasing, it should be symmetric, i.e. each edge of a dash should have some consistent level of shading across that edge, without individual pixels looking different from their neighbors along the edge.)

I think this is part of what is giving us trouble in bug 1752893.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (view at 300% full-page-zoom, assuming 1.0x pixel scaling in OS settings)

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screenshot taken with Firefox Screenshots (right click, "take screenshot") -- does not show bug, for some reason (!!)

Comment 3

[Daniel Holbert [:dholbert]]

Uh.... actually, it looks like the spikes don't get captured in Firefox's built-in screenshot tool, for some reason! That is super-interesting. I wonder if that means this is an invalidation bug of some sort.

Fortunately they do get captured in my separate screeshotting tool, flameshot; I'll post a screenshot with that next.

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: screenshot taken with external program (flameshot) -- this is what the testcase actually looks like when viewed with 300% full-page-zoom

Comment 5

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #3)

Uh.... actually, it looks like the spikes don't get captured in Firefox's built-in screenshot tool, for some reason! That is super-interesting. I wonder if that means this is an invalidation bug of some sort.

(No, probably not an invalidation bug -- tab-switching and display:none toggling don't make the jaggy spikes go away, at least. Firefox Screenshots must be doing some sort of smoothing by accident, or maybe has some weird interaction with the full-page zoom level. Anyway, best not to get too distracted by that; the flameshot screenshot is the truthful screenshot-of-the-bug here.)

Comment 6

[Emilio Cobos Álvarez [:emilio]]

Firefox Screenshots uses another codepath for rendering that doesn't use WR, IIRC.

Comment 7

[Daniel Holbert [:dholbert]]

Indeed, this is WebRender-specific.

I confirmed by testing Nightly 2021-06-01 (old enough to have WR and non-WR available via prefs) -- I can reproduce the bug (using comment 0 STR) in the default configuration, but I cannot reproduce (i.e. the dashes have squared-off edges) if I set gfx.webrender.force-disabled to true and restart Firefox.

Comment 8

[Miko Mynttinen]

Glenn, would you mind taking a look at this?

Comment 9

[Glenn Watson [:gw]]

Attachment: Artifact at 350%

Comment 10

[Glenn Watson [:gw]]

I couldn't reproduce the exact artifact you're seeing, but I could reproduce some artifacts at 350% (see zoomed image above) that are probably the same issue showing up a bit differently, I think.

It's hard to know without doing a detailed investigation, but my initial guess would be that the scale chosen (in WR) for the dash segments is incorrect, resulting in some sampling inaccuracies.

Comment 11

[Daniel Holbert [:dholbert]]

(In reply to Glenn Watson [:gw] from comment #10)

I couldn't reproduce the exact artifact you're seeing, but I could reproduce some artifacts at 350% (see zoomed image above) that are probably the same issue showing up a bit differently, I think.

Yeah, that looks like a manifestation of the same issue to me (an asymmetric "jump", in what should be a squared-off edge).

Also, regarding the "squared-off" idealized rendering here: as one comparison, Chrome seems to intentionally not draw squared-off dash segments -- in the attached testcase, Chrome draws the dash segments like "sausages", with flat sides and rounded ends, even at the default 100% zoom level. They have symmetry across the clipped edges of each dash, though, so it ends up looking nice and balanced.

Comment 12

[Daniel Holbert [:dholbert]]

Also worth noting: if I configure Ubuntu to use 250% pixel-scaling (Settings | Displays | Scale: 250%), then I see these artifacts at Firefox's default zoom level (100%), with no full-page-zoom required. The artifacts look pretty-much exactly like my comment 4 screenshot.