Custom cursors keep breaking

Site URL: www.schnabel.co.uk

Hi all!

I have managed to sculpt my site over the years with custom CSS sourced from all over the web and implemented it with very little actual knowledge for how it works - and for the most part it has worked.

I'm currently battling to get my custom cursors to work properly. When the site loads, they work perfectly. But somewhat erratically when you leave the tab or just wait a long time, the cursors stop behaving properly. Sometimes the left arrow on the gallery will change to the right arrow (and right arrow to left arrow sometimes) and not change when the cursor is moved to the left hand side of the gallery, sometimes the arrows will change to the custom pointer instead. Custom hover over the navigation links will also stop working. I have to click a link or reload the site for it to work again.

Here is the custom CSS that got it (almost) working in the first place:

/* Custom Cursors */

body {
cursor: url(https://images.squarespace-cdn.com/content/56a922cea128e6fdb3882940/3d1d7216-1dd0-4aed-93fc-adf3863c5da2/CursorGreen.png?content-type=image%2Fpng), auto;

}

 a:hover{
cursor: url(https://images.squarespace-cdn.com/content/56a922cea128e6fdb3882940/5753ec6e-59fb-4856-9cab-7da618a35e00/CursorCrosshairGreen.png?content-type=image%2Fpng), auto;
}

.collection-type-gallery .overlay-controls.left-control {
                               cursor: url(https://images.squarespace-cdn.com/content/56a922cea128e6fdb3882940/fab4ca5b-9950-47d8-9399-53b4eae1fda1/LeftArrowGreen.png?content-type=image%2Fpng), e-resize;
}
.collection-type-gallery .overlay-controls.right-control {
                               cursor: url(https://images.squarespace-cdn.com/content/56a922cea128e6fdb3882940/887934a9-adf4-4ba3-979e-767e20ea57b4/RightArrowGreen.png?content-type=image%2Fpng), w-resize;
}

.collection-type-gallery .meta .gallery-controls#numberControls .number {
cursor: crosshair;
}

/* End of Custom Cursors */

Any assistance with getting this to work properly would be much appreciated!

Thanks!

David

Not really sure what the problem here is, but you can delete the end of each of the source URLs, and add 'apostrophes' around the URL (see bolded):

body {
cursor: url('https://images.squarespace-cdn.com/content/56a922cea128e6fdb3882940/3d1d7216-1dd0-4aed-93fc-adf3863c5da2/CursorGreen.png'?content-type=image%2Fpng), auto;
}

body {
cursor: url('https://images.squarespace-cdn.com/content/56a922cea128e6fdb3882940/3d1d7216-1dd0-4aed-93fc-adf3863c5da2/CursorGreen.png'), auto;
}

Thanks Zygmunt. I have now found that there seems to be no issue when viewing the site on Chrome or Firefox, and the problem only seems to occur on Safari. I have made those small changes to the URLs as you suggest, but this doesn't seem to have made any difference.

You could try using a different format than .png, .svg or .cur might work better on Safari

https://convertio.co/png-cur/