ColorSlider Rounded Corner White Edge

[ktabors]

Description

The ColorSlider rounded corners have a weird white effect on them that makes them seem rounded wrong.

Steps to reproduce

1. Go to https://opensource.adobe.com/spectrum-css/colorslider.html
2. Set the page to dark theme.
3. Use browser zoom to get to more than 150% zoom.
4. Observe that the rounder corners seem to have a white line.
5. On a mac use command-control-shift-4 to get the camera tool and select the color slider.
6. Paste that into something like Preview.
7. Inspect the color slider.
8. Remove the .spectrum-ColorSlider-checkerboard { background-color: var(--spectrum-global-color-static-white, rgb(255, 255, 255)); } style
9. Take another screen shoot.
10. Zoom into both screenshoots and you'll see that the first one has an imperfect rounder corner.

You technically don't have to browser zoom. I saw it and started zooming to get a better look at it and it makes it easier to see when you zoom in the image editing app like preview.

Expected behavior

I'd expect the second screenshot from the steps above which you can see below. I found this because it looked weird without zooming and I tried to figure out if there was something happening. When I showed this to others they had also noticed it.

Screenshots

This was noticed in react spectrum ColorSlider. This image is of it in RTL, dark theme, at about 150% to 200% zoom. You can see a white line on the rounded corners.

This is from the spectrum-css docs site, zoomed and dark theme. You can see a little white on corner.

This is with the same as the previous minus the background-color that seems to cause it.

Environment

• Spectrum CSS version: docs site and react spectrum
• Browser(s) and OS(s): chrome osx

Additional context

Another dev had this thought about fixing it. "... is should all opacity backgrounds should be white/grey, or black/grey as well. if they can be black/grey as well, our problem is reduced drastically to the point where it’s imperceptible. Fortunately the checkerboard is created programmatically, so we can change those colors by just changing the background color from static-white to static-black (maybe there’s a token that already does this)."

[snowystinger]

I tried out background-clip (all of them) to no avail as well. Here's a stack overflow about it as well https://stackoverflow.com/questions/26484109/rounded-corner-in-chrome-extraneous-lines-in-corners which might have some suggestions

[GarthDB]

@ktabors so changing

.spectrum-ColorSlider-checkerboard { background-color: var(--spectrum-global-color-static-white, rgb(255, 255, 255)); }

to

.spectrum-ColorSlider-checkerboard { background-color: var(--spectrum-global-color-static-black, rgb(0, 0, 0)); }

reduces the problem?

[ktabors]

My understanding of Rob's suggestion is changing the background-color and image based on the theme. Leave it white when light, but when dark change the image to support the background-color being black.