Custom cursor is glitching from custom image to normal pointer

Hi, I’ve created a custom cursor with an image. It was working well, but now when I visit my site it glitches between the custom cursor (strawberry), and the standard cursor. It’s meant to appear on hover over the right and left side of the slider. Published site

Any ideas on why it stopped working?

code is in an embed element on each page:

.right {
cursor: url(‘https://uploads-ssl.webflow.com/5f3c2483d7dfe4689e53f708/5f613bc1c20209107e216b22_Strawberry_rightcursor_45x45.png’), default;
}

.left {
cursor: url(‘https://uploads-ssl.webflow.com/5f3c2483d7dfe4689e53f708/5f613b8cfd8afe3f86165b41_Strawberry_leftcursor_45x45.png’), default;

}


Here is my site Read-Only: Webflow - Abbie Winters — Portfolio

@Abbie_Winters1 - what browser / os are you experiencing the issue on? I went to the site and navigated around and didn’t see any issues with the cursor.

@sam-g I was using Chrome and Mac Mojave, then I realized how embarrassingly old that was, so I updated and seemed to fix it on my end. But, I’ve asked a few friends to test on their computers and the glitch still occurs. Is there anyway to safe guard against a user’s browser/ OS system?

Looks like there are known issues with pngs and jpgs being used as cursors on Mac in most browsers. Can you create an svg or other image type?

@Abbie_Winters1

@sam-g Oh yes that’s worth a try! Thanks so much.