Cursor is not hiding on mobile on static rendered pages

[franklington]

Can't figure out why the cursor is still visible on and interacting on my iPhone safari.
FYI: The whole site is exported static.

My packages:

"dependencies": {
"@mdx-js/loader": "^2.3.0",
"@mdx-js/react": "^2.3.0",
"@motionone/utils": "^10.15.1",
"@next/bundle-analyzer": "^13.3.0",
"chota": "^0.9.2",
"cookies-next": "^4.0.0",
"framer-motion": "^10.12.3",
"keen-slider": "^6.8.6",
"marked-react": "^1.3.2",
"next": "^13.3.0",
"next-image-export-optimizer": "^1.8.3",
"next-themes": "^0.2.1",
"react": "^18.2.0",
"react-animated-cursor": "^2.7.0",
"react-dom": "^18.2.0",
"react-markdown": "^8.0.7",
"react-player": "^2.12.0",
"use-sound": "^4.0.1"
},
"devDependencies": {
"eslint": "7.32.0",
"eslint-config-next": "^13.3.0",
"gray-matter": "^4.0.3",
"marked": "^4.0.14",
"next-seo": "^5.4.0",
"next-sitemap": "^4.1.8",
"sass": "^1.62.0"
}

[stephenscaff]

About to publish an update that might address this.

[KevinNizet]

Hello @stephenscaff @franklington,
Does the update is released ? Do you have another way to disable the cursor on mobile devices ?
Thanks :)

[guifra90]

Hi, yes I also confirm that the component works fine, but on mobile devices the cursor remains active when you tap on the screen. While waiting for the fix, do you have a work around in mind? Thanks for the support!

[KevinNizet]

Hi @guifra90, @stephenscaff, no I tried several options with custom react hooks but not really satisfying in the end and a bit overkilled...
So yes, it remains active for now on mobile devices when you tap on screen.

[AbogeJr]

Hey @guifra90 et al. I may have found a temporary workaround (though it's really hacky). I cloned the repo and copied the lib directory from the react-animated-cursor into my project then, since I'm using Tailwind for styling, i manually added the classes on the div returned by CursorCore (which is the custom cursor element) to hide the cursor on small screens; "hidden md:block". Then i just imported AnimatedCursor as a client component and it no longer shows on mobile. Hope this helps 👍🏾.

You can check it out Here