Cursor crosshair doesn't display correctly on Chrome & Safari

[nayen]

Hi,

I have a color picker with canvas and it has "cursor: crosshair" as style. In Firefox (and Opera), when I click and drag on the canvas, the cursor stays as crosshair but in Chrome and Safari, the cursor is displayed as crosshair when you hover over the canvas but when you click and drag the cursor on it, it changes to text cursor.

Please check the following URL in Firefox and Chrome and you will better understand my question (not my script but mine is just a similar one):

http://www.ginifab.com/feeds/pms/pms_color_in_image.php

Can this be fixed?

Thanks for any ideas.

[PicnicTutorials]

Arrow would be better here anyway

[ronpat]

It seems to be a problem others have experienced, too. Try googling "cursor:crosshair chrome" (without quotes). You may find something useful.

[ralph.m]

It would be interesting to see if the same behavior occurs when dragging is appropriate (which it doesn't seem to be in this example). A crosshair (to me at least) implies that dragging is an option, whle an arrow (as Eric suggested) implies more that you are meant to click somewhere—which is what is needed here. That's my view, anyhow.

[ronpat]

I would think that a pointy finger (or maybe the crosshairs) would indicate "click here" rather than the arrow which is a default point anywhere cursor. Don't think I've ever noticed the crosshairs before (which was the OPs concern). I lead a pretty sheltered life, though.

EDIT:
A little reading... the arrow is a pointer, the pointy finger indicates clickable, the crosshairs is a precision pointer/clicker. No mention found of expected cursor changes when dragging while mouse is down (doesn't mean there aren't any) so I would expect the crosshair (or pointy finger) to remain a crosshair (or pointy finger) while dragging.

I didn't see anything to drag on this page. The color circle responded to a click only. It remained a crosshair while dragging and returned to an arrow after exiting the circle container, but there seemed to be no purpose in dragging within the color circle, anyway.

It sounds like Chrome and Safari may be a little smarter than Firefox and Opera, but that's just idle specualtion.

[nayen]

It seems to be a problem others have experienced, too. Try googling "cursor:crosshair chrome" (without quotes). You may find something useful.

Yeah, I did some search before posting here. There are some discussions but no solution. I think it is not fixable by CSS, it is most probably how webkit browsers are built.

It would be interesting to see if the same behavior occurs when dragging is appropriate (which it doesn't seem to be in this example). A crosshair (to me at least) implies that dragging is an option, whle an arrow (as Eric suggested) implies more that you are meant to click somewhere—which is what is needed here. That's my view, anyhow.

Yes, the same behavior occurs when dragging is appropriate too.

I would think that a pointy finger (or maybe the crosshairs) would indicate "click here" rather than the arrow which is a default point anywhere cursor. Don't think I've ever noticed the crosshairs before (which was the OPs concern). I lead a pretty sheltered life, though.

EDIT:
A little reading... the arrow is a pointer, the pointy finger indicates clickable, the crosshairs is a precision pointer/clicker. No mention found of expected cursor changes when dragging while mouse is down (doesn't mean there aren't any) so I would expect the crosshair (or pointy finger) to remain a crosshair (or pointy finger) while dragging.

I didn't see anything to drag on this page. The color circle responded to a click only. It remained a crosshair while dragging and returned to an arrow after exiting the circle container, but there seemed to be no purpose in dragging within the color circle, anyway.

It sounds like Chrome and Safari may be a little smarter than Firefox and Opera, but that's just idle specualtion.

In my color picker, you can get the color both by clicking or by clicking+dragging as in Photoshop's color picker. I really can't show my color picker because it is a private project and now I am sure that this is not code related. Actually, you can see the same behavior when you open any web page with Firefox and Chrome separately, when you click anywhere on that page and drag the cursor. I don't think this is a case where Chrome and Safari are smarter than Firefox because in Firefox while dragging, the cursor changes to text cursor only on text elements (naturally), however in Chrome, it changes to text cursor on every element.