CSS Triggering Mouse Event in Chrome

Overview

I've been working on a front-end, HTML5/Javascript application, for a while now and every once in a while you come across quirks in different browsers. I've been long removed from heavy front-end development work, probably a couple years now, and it's been a real pleasure getting back up to speed in the game. It's amazing how quickly things I used to see as wishful thinking are now practically acceptable to use. Stuck in the old days of supporting IE6 drove me insane. So much so, in fact, that I started punting everything front-end that I could possibly do. Now, the times have changed, but you still come across some strange cases every now and then which brings me to the purpose of this article.

Separation of Style and Logic

A core principle I advocate is to separate business logic from the display. This is represented in several initialisms like MVC, MVVC, and MVP. I view this line of demarcation to hold especially true in front-end development. You have your display, the CSS, and your business logic, javascript. You can easily blend the two, but you have to explicitly do so. If you want something to trigger in javascript when some CSS changes, you attached a listener to track the changes. Violation of this segregation by default isn't something I expect, and as it turns out, was the cause for many hours of lost debugging.

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.

Just so I'm clear on this, I wasn't changing the cursor style via javascript. I had the styling in a CSS file which said the cursor over my screensaver shall be no more cursor:none;. That is what caused the confusion, the bleeding over of function into style.

Findings

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.