1

I've been looking for an answer for a while now and I can't seem to find any reasons why this is an issue. I have various places in my style sheets where I use cursor: pointer for UI elements like buttons and links. The majority of the time it works as I expect, but occasionally they just don't want to work. I'd love to say I have a specific example in the style sheets that would ensure replication but that's been the issue. When it happens, it's not just for one element, it's for all of them. I've experienced this across the board with modern browsers and it seems to just be completely random which makes it hard to troubleshoot.

The only thing I've been able to confirm 100% is that if it does happen, I can open developer tools, then select an element to inspect that is supposed to have the cursor: pointer and the effect begins working everywhere again. I'm not sure what's going on here and it's driving me up the wall.

Is there any documentation surrounding this issue or something similar?

  • I experience it in localhost.
  • I haven't noticed it in production.
  • I haven't noticed it on JS Fiddle or Codepen when creating wireframes.

Is it a localhost issue? I've even thought it may be related to something I had done prior, but it happens even as I just navigate the site while debugging, sometimes it works on one page, but come back to the same page later in the session and it may not work anymore.

I know this one's tough and there's not a lot to go on. I don't usually make posts without code, but I'm just wondering if anyone else has experienced the same or a similar issue and resolved it.

Hazel へいぜる
  • 2,751
  • 1
  • 12
  • 44
  • 1
    I realize that an anecdotal "me too" isn't exactly helpful, but I've also experienced this exact issue. Mine was specifically in `localhost` when using **Visual Studio 2017**. If I manually went to `localhost` in a *normal* browser window, it worked fine; the issue was specifically in the "JS Debugger" browser window that Visual Studio automatically opens when starting my project. The only solution I found was to [disable JS debugging](https://stackoverflow.com/a/50255986/2026606). – Tyler Roper Jun 18 '19 at 20:45
  • @TylerRoper Visual Studio 2017 :D Of course. I'll take a look at the link and get back with you. Thanks for the direction! – Hazel へいぜる Jun 18 '19 at 20:46

2 Answers2

1

I too have experienced this. It's actually not a code issue at all. I've found that the cursor: pointer bug you're experiencing is directly related to the Visual Studio 2017 (and newer) remote debugging browser window.

Solution

In Visual Studio, disable "Enable JavaScript Debugging for ASP.NET (Chrome & IE)".

At the top of your Visual Studio window, go to Debug -> Options. The highlighted item in the screenshow below must be unchecked:

enter image description here

This was a feature added in 2017, and while it helps with debugging JavaScript and TypeScript, it does so by launching a plain browser window ("remote debugger"); that is, no extensions, no bookmarks, no history, etc. The remote debugging browser window seems to have its fair share of bugs.

Tyler Roper
  • 21,445
  • 6
  • 33
  • 56
1

I saw this same behavior but not while debugging through visual studio. If I hit F12 to go to the Chrome dev tools, then click on an html element. The cursor goes to the style listed according to the style sheet.

Peter Csala
  • 17,736
  • 16
  • 35
  • 75
Zachary Keim
  • 11
  • 1