Controls: Inconsistent focus ring rendering

Recently, we’ve made the focus “ring” a 0.5px box-shadow for the controls. Today, I noticed some strange/inconsistent rendering with these new styles (see screenshot above). Some of the sides appear to be “cut off”.

Demo link: https://g2-components.xyz/?path=/story/designtools-typographytools--bordered-color-panel-expand

It doesn’t seem to be affecting the components here: https://g2-components.xyz/?path=/story/designtools-presentation-components--input-text-field

I’m not entirely sure what may be causing it. There doesn’t seem to be any overflow based cropping in the UI that’s being affected - at least, not from what I can tell.

---

This may be something to keep an eye on.

If this continues to be a problem, and we’re adamant on having 1.5px sub-pixel value borders, an alternative solution may be to render the box-shadow as inset. From my tests, this seems to resolve the issue. However, this does affect the “roundness” of the corners ever so slightly.

---

cc’ing @jasmussen

[jasmussen]

A roller coaster! But this is probably better for it.

We can still revisit the focus style in the future, but now it’ll be because we want to 😅

[ItsJonQ]

Got it. <Slider /> component. Styles. will-change: transform;. Removing this fixes it 🙈 .

What a wild ride.