Use crispEdges rendering for octicon-internal-repo

[CirnoT]

Came up in #11771 (comment)

Applied only to this specific octicon so that it doesn't interfere with others - that octicon is kinda special in a way that it's 13px, unlike others that are 10px, 12px or 14px.

[CirnoT]

CI failure unrelated

[silverwind]

So your theory is that this brower bug only triggers on odd widths only?

[CirnoT]

Most likely with combination of font size/line height or specific positioning and size; for example I can not reproduce the issue on 32px for example. It's less visible on 24px but still can be noticed if two were stacked near each other.

[CirnoT]

Interestingly can reproduce it on 30px but it's crisp on 32px (which is exactly double of 16px which is also broken)

Might have to do something with this particular SVG, I don't know. This icon was added late in octicon lifecycle and looking at some issues on GitHub they might not even have original files for it.

It's very possible that like in original Firefox issue, it's not about odd width but sub-pixel anti-aliasing and it just so happens that this icon is made in some unique way that causes it to manifest on certain resolutions.

[CirnoT]

Just noticed that it's blurry on 32px but only when zoomed; except for multipliers of 100% such as 200% or 300% - on those it's crisp.

[silverwind]

Any drawback to using crispEdges on all SVG icons?

[CirnoT]

In the end adding this CSS rule for this icon only seems like a good compromise to me; it works in all cases I tested and doesn't affect anything else. We'll be able to remove it whenever we switch to new octicons (once they're out officially) or when we get to parsing octicon JSON (whichever is first I suppose).

[silverwind]

Oh, and does geometricPrecision have any effect on your issue? I remember using that once. crispEdges may turn off anti-aliasing so might look bad in some cases.

[CirnoT]

Any drawback to using crispEdges on all SVG icons?

Jagged edges on icons such as notification bell; generally I don't think it's recommended to use it on all icons; it's a workaround.

[CirnoT]

Oh, and does geometricPrecision have any effect on your issue?

No, but I believe disabling anti-aliasing is what actually fixes it for this icon and it doesn't has any large rounded shapes so it's fine either way.