Search code examples
csscursorwindows-xp

Issue with two cursors on top of each other in Windows XP

I'm having an issue with cursors. I have a CSS class which I will refer to as a block, as it is simply a div with a height and a width. Using jQuery UI the block is resizable and draggable. When the cursor is near the edges the resize icon is shown and when in the center of the block a grabbing icon is displayed. The grabbing icon is retrieved using cursor: url(...), default; and this is where the issue happens. Using a virtual machine to test on different operating systems I get a strange behavior in Windows XP only - two icons are shown at the same time. It is the grabbing icon, along with the style the cursor had before entering the draggable area (see image).

Cursor Error illustration

This fiddle illustrates the problem (works fine, except on my virtual machine with Windows XP)

In this project I'm developing for Chrome only and is only concerned about the behavior in Chorme. It happens only using Window XP. I tried using the -webkit-grab which works fine, but it shows up black on one of the other operating systems (I don't remember which one), so that's not a good solution (unless you know of a way to avoid the black icon).

Any clue on what is going on? If some of you out there can't reproduce it on Windows XP, I'd really like to hear that as well.

Best regards

Solution

  • What you're seeing is a bug with the Virtual Machine software you're using rather than a bug in your development. The Virtual Machine software is stacking your host cursor over the VM's cursor, hence the double graphic you're seeing.

    I've just tested this for you to double-check. You're all-clear!

    If you want to be really sure, load up this page and try hovering over the links in the example there.

    As an aside (and not that it should effect you in this particular example): you should really apply cursor properties to the element directly rather than to the :hover selector. The cursor will only display when you mouse-over that element anyway, but it removes any ambiguity for older browsers.

    Thus, from your example:

    .block {
    width: 100px;
    height: 100px;
    background-color: red;
    cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default;
}