CSS Triggering Mouse Event in Chrome
Separation of Style and Logic
Styling a Cursor
When you style something with CSS, you don't expect an event to trigger by default. If you change the color of background of an element, you don't expect that element to move do you or register a click. I'd file that under unexpected behavior as a bug if it does happen. This is exactly what I found while trying to write a screensaver for a downloadable HTML5-based application. When the screensaver turned on, I wanted to hide the cursor, but as soon as the styling of the cursor changed to none, the screensaver stopped. The screensaver was bound to click, mousemove, and keydown events which I had not triggered and nothing more. I fire up Chrome's console for some event debugging, and I immediately find that the mouse was being "moved" when the cursor style changed. The mouse wasn't actually moving though; the browser was just firing a fake mousemove event when changing the cursor styling. Firefox didn't trigger the event, so I started looking around online for some kind of information and found next to nothing, hence this article.
cursor:none;. That is what caused the confusion, the bleeding over of function into style.
I didn't completely come out empty handed in my search for answers. I was starting to minimize my use case to file a bug when I found what appeared to be the bug for this issue that fed down a rabbit hole of sorts. The chromium bug 103041 lead to the webkit changeset 142861 which lead to these webkit bugs 85343 and 101857. Sadly, it's marked as UNCONFIRMED, but apparently that hasn't stopped patches from being developed. It looks like the patch is in review for landing now, so hopefully this bug will not be around much longer.