SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    308
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cursor crosshair doesn't display correctly on Chrome & Safari

    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):

    Code:
    http://www.ginifab.com/feeds/pms/pms_color_in_image.php
    Can this be fixed?

    Thanks for any ideas.

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Arrow would be better here anyway

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    It seems to be a problem others have experienced, too. Try googling "cursor:crosshair chrome" (without quotes). You may find something useful.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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.

  6. #6
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    308
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    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.

    Quote Originally Posted by ralph.m View Post
    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.

    Quote Originally Posted by ronpat View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •