Cursor showing on top left screen on mobile devices

[EthanL06]

I am having a problem where the custom cursor still shows on mobile devices. In particular, it is visible on the top-left of the screen. I am using Next.js 13.4.

"use client";

import AnimatedCursor from "react-animated-cursor";

const Cursor = () => {
  return (
    <AnimatedCursor
      innerSize={8}
      outerSize={35}
      innerScale={1}
      outerScale={2}
      outerAlpha={0}
      color="255, 255, 255"
      outerStyle={{
        border: "3px solid #fff",
      }}
      clickables={[
        "a",
        'input[type="text"]',
        'input[type="email"]',
        'input[type="number"]',
        'input[type="submit"]',
        'input[type="image"]',
        "label[for]",
        "select",
        "textarea",
        "button",
        ".link",
        {
          target: ".purple",
          innerScale: 0.8,
          outerStyle: {
            border: "4px solid #7a75ff",
          },
        },
        {
          target: ".gray",
          innerScale: 0.8,
          outerStyle: {
            border: "4px solid rgba(255,255,255,0.30)",
          },
        },
      ]}
    />
  );
};
export default Cursor;

[stephenscaff]

Interesting.

Are you on Next 13, with app directory? Wondering if mobile check is failing now cause of how Next is handling server / client components?

Honestly, never loved how that check works anyway and been meaning to refactor.

Will take a look by tomorrow. As a quick fix, you could just manually hide with css. But we don't even want the cursor mounting (obviously).

Thanks for the heads up.

[stephenscaff]

Okay. This should be fixed after #61

Moved the device check logic to a next.js (and client side component) friendly hook.

Tested in latest next.

Also addressed another warning I notices around Extra attributes from server.

Latest version 2.11.1 is deployed.

Let me know if you have any additional issues.

[EthanL06]

Okay. This should be fixed after #61

Moved the device check logic to a next.js (and client side component) friendly hook.

Tested in latest next.

Also addressed another warning I notices around Extra attributes from server.

Latest version 2.11.1 is deployed.

Let me know if you have any additional issues.

Hi! I updated to the latest version 2.11.1 and still have the issue. While previously the bug only affected mobile devices, after updating the package, the cursor now appears on the top-left on desktop screens as well. The screenshots below are how it appears on both desktop and mobile. Note that I did not change anything from the code above.

[stephenscaff]

Dang.

Re the mobile issue:

I tested various emulators, not actually on device.

What device are you using?

I'll deploy a next app and test on a few devices for real, for real.

Not having the issue in non next / ssr apps. Check the demo link on your phone to see if that's true for you.

Note I'm using a combo of UA and screen pixel density to check for touch screens.

Next 13 up doesn't seem to recognize user agent as expected. Looks like they even added a UA lib, presumably to deal with some environmental differences with ssr and/or client/server components.

As for your desktop comment:

The created cursor element is just defaulting to 0,0 coords on mount. Once you move the cursor, it begins following your mouse x, y coords. It's always done this. Generally not noticed.

However, I agree it would be better to start with opacity:0 before following mouse.

Will introduce that feature.

Have some time to work on this today. (Feel free to PR if you have a solve for either).

Ping you back here after I PR.

[stephenscaff]

FYI. Think I have a fix. Also having the cursor start at opacity 0 until mouse move.

Doing some better testing this time. Expect resolution soon.