[Bug]: [ColorHandle] Transition of "focused" state is not correct on Safari browser

[prabhjodh]

Code of conduct

• [X] I agree to follow this project's code of conduct.

Impacted component(s)

sp-color-handle

Expected behavior

No response

Actual behavior

The transition of increasing the size of the color handle is not smooth (it is smooth in Chrome) in Safari browser on Mac. Screen recoding is attached for the same.

Screenshots

https://github.com/adobe/spectrum-web-components/assets/20225072/bb15b0e8-cb97-485f-81ee-5f962093a620

What browsers are you seeing the problem in?

Safari

How can we reproduce this issue?

1. Use sp-color-slider or sp-color-area which in turn use sp-color-handle component.
2. Click anywhere on the component and check the transition.

Sample code that illustrates the problem

No response

Logs taken while reproducing problem

No response

[Westbrook]

@pfulton this is likely an issue of the CSS that is leveraged to deliver this animation. The transition of border-width, box-shadow and *-size are all low performance animations. Any thoughts on a path that didn't involve this?

Raw scale transitions would be the most broadly applicable and performant, but they'd likely not be 100% design spec compliant, as the border to also get wider as the element got larger.

This style of animation is quite nice. We could maybe place it behind an @supports query so that we do the nicer version when possible and the janky version in older Safari and current Firefox?

[pfulton]

Created a Jira ticket for us to track this work. There may be a chance that we can address this in our current sprint. We'll link back to this Issue when we get a PR up.

[najikahalsema]

Hi @prabhjodh , could you verify whether. you're still experiencing this issue and if so, what version of this components you are on?