radix-ui / primitives

Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
https://radix-ui.com/primitives
MIT License
15.88k stars 823 forks source link

Slider thumb/range glitchy behavior when animated in safari #2543

Open michaelongaro opened 12 months ago

michaelongaro commented 12 months ago

Bug report

Current Behavior

(This is from a vm version of safari, but I have confirmed that this happens on actual browers powered by the safari engine as well)

https://github.com/radix-ui/primitives/assets/35980684/2e928f9c-d5d3-4c8c-9876-15f52dfff1e4

Expected behavior

This example is from chrome, the slider thumb and range components respectively smoothly animate from one position to the next.

https://github.com/radix-ui/primitives/assets/35980684/2fe6516d-2fa8-4888-9413-b1f993b42854

Reproducible example

CodeSandbox replication

Suggested solution

I am unsure as to whether this is a Safari bug or a radix bug unfortunately. The only thing out of the ordinary that I noticed when looking through the devtools was that the thumb/range "left" and "right" values respectively that were calculated from the css "calc()" operation had substantially higher precision (13.00271038px on safari vs 13.003 on chrome/firefox). This is my only lead as to what might be causing the glitchy behavior.

Your environment

Software Name(s) Version
Radix Package(s) @radix-ui/react-slider 1.1.2
React n/a 18.2.0
Browser Safari Every version I have tested so far
yoosion030 commented 2 months ago

+1