CODEWITHSUNDEEP
csscursormicrosoft-edge
CdnXxRRODxX
CdnXxRRODxX

Reputation: 341

Custom Cursor on Microsoft Edge has an Offset

I have a custom cursor working on Chrome and Firefox by using the CSS property, cursor. However, on Microsoft Edge, the cursor seems to have an offset. I have to aim above my custom cursor a bit in order to select items accurately.

Is there something I can do to fix this? Or is this some sort of limitation?

Edit: I should mention that I'm using a custom image as my cursor.

Upvotes: 2

Views: 5288

Answers (2)

Sandhje Bouw
Sandhje Bouw

Reputation: 172

In both IE and Edge only .cur files are supported, see https://msdn.microsoft.com/en-us/library/aa358795(v=vs.85).aspx. (Edge supports other formats but not the interaction point definition as you mentioned in your comment to Martin Beeby's answer, rendering those pretty useless.) The .cur file allows you to define the interaction point. Just google for ".cur editor" and choose the editor that suits you to create a .cur file.

Since other browsers do support the definition for the interaction point, but not the .cur format, you must define two cursor properties in your css, the first with the .cur file and the second with a .png or other format and the interaction point definition. IE and Edge will ignore the second and for other browsers the .cur file will be overwritten, that way it'll work cross-browser. 

div {
    cursor: url(path/to/cursor.cur), auto; /*IE and Edge*/
    cursor: url(path/to/cursor.png) 4 12, auto; /*Chrome, FF, etc.*/ 
}

One side note, be sure to read this (http://blog.stchur.com/2006/11/02/ie-bug-dealing-with-css-custom-cusors/) article. It's about a relative path bug in IE 6 & 7, but the bug is still around in IE 11. The bug seems resolved in Edge though (at least when I tried recently). So you need to fiddle a bit with the path to the .cur file to get it working on both IE and Edge. See the workarounds mentioned in the article.

Upvotes: 1

Martin Beeby
Martin Beeby

Reputation: 4599

In CSS you can pass in coordinates which specify the interaction point.

Perhaps adding these will help solve your issue?

/* Using URL and coordinates */
cursor:  url(cursor1.png) 4 12, auto;

Upvotes: 0

Related Questions