Strange checkbox rendering in `ActionList` with `shape-rendering: crispedges;` in Chrome

Describe the bug

After upgrading to the latest version of primer/react in the new Projects experience, I noticed that the checkboxes look strange

I believe that this is due to the fact that the checkboxes are now using a <rect /> for the checkbox as of:

https://github.com/primer/react/commit/250e4b00f4d996b6125d381bae2487b57156687c#diff-008c41e7105eb2bb0be2768425e46a21944dcbffc988ca984f91d3d11d280efdR339-R348

Now that we’re using a <rect /> there, in projects, which is hosted in github.com and will have all the css from github.com in its stylesheet, those icons are getting affected by a global style rule:

rect {
    shape-rendering: crispedges;
}

In MacOS + Chrome, on a non-retina display, the checkboxes are rendered like the screenshot above. In other environments (or if I move the browser window to my laptop’s display), the checkboxes are rendered normally. Also, if I add a style rule of:

rect {
    shape-rendering: auto;
}

the checkboxes look how I would expect.

I can reproduce in the PRC storybook, by manually adding that rule (the bottom checkbox has crispedges the top does not`):

We could come up with a projects-specific fix, but that would mean that other consumers of PRC that are hosted in the github.com environment might have to come up with a similar fix, so I wasn’t sure if it was worth it to add something like shape-rendering: auto to the component in PRC (if that is indeed the correct fix).

[simurai]

There were talks about visual regression testing in the past few years. But as of today it’s still a manual process:

1. Deploy to review-lab
2. Click around to see if something looks off

I know, it sounds a bit tedious and risky… and it is.

[simurai]

@siddharthkp Based on the PR https://github.com/github/github/pull/2373 where it was added, I think initially it was meant for those Insights graphs? E.g. making those bars in https://github.com/primer/react/graphs/commit-activity look sharp:

Yeah, would be great to limit the scope a bit. Hard to say, but maybe to g.bar rect. Or the more generic .graphs rect. I’ll add it to our backlog. 👍