search

stephenscaff / react-animated-cursor

An animated custom cursor React component.
ISC License
273 stars 28 forks source link

Safari is blurring the cursor scaling transition on hover/click #35

Closed alahji7 closed 1 year ago

alahji7 commented 1 year ago

I saw some earlier comments regarding this issue, but still seems to happen. My cursor has a size of 6 and the scale is set to 3, then on hover or click the cursor is really blurry in safari.

Any way to update this?

stephenscaff commented 1 year ago

Sorry - been terrible about updating this lib, but running through issues / clean up / moving to TS now.

Thought i fixed this..... will take a look.

stephenscaff commented 1 year ago

Okay, just published version 2.6.0, which fixes the blur issue on safari. Safari has a long-standing bug that causes elements that transform: scale to blur our (from an anti-aliasing hiccup), esp on a fixed position element.

I tried all the moves to 'fix' it with all the common moves, none did the trick. So, I updated the interaction from transform: scale to a height x width update. Props still work the same, so nothing to change with how you use the component. Created logic to maintain the same property values.

So, just update your package to 2.6.0 and you should be good to go.

Gonna close this one out, but let me know if you hit any issues. Also updated the demo site to include a few demos of how to create different cursor types - default, donut, blend mode.

Thanks.

alahji7 commented 12 months ago

Your update just came in time. I upgraded and tested my use case. Works perfect now. Thank you so much for this quick update.

stephenscaff commented 12 months ago

Awesome. Let me know if you hit anything else.