How user avatars and wrong DPI broke double-clicking in our file explorer

This week I had to deal with a curious situation in our main CMS for kiosk administration.

The newest beta version of the system was almost ready to be deployed to production and it completely changed the way we handle resource access. New ways to work with permissions, roles, scopes and many other things. We even allow sharing of entities now. And as part of the new user experience, we now allow our users to add an avatar to their profile which shows beside their name in most places in the system where a user name is supposed to be shown - this actually becomes relevant later in this story.

Now here comes the catch. A colleague of mine came to me saying that something was wrong with our embeded file explorer. He said that sometimes he just can't open a file or traverse a folder - but only if the component is shown as a modal dialog, not actually embeded as part of the web page - that works fine.

Pesky testers, am I right?

So anyway, I booted up my local copy of the system and tried to replicate the issue. No problem found, everything works just fine. I've opened our semi-deployed beta version made for testing, still not a single problem anywhere. I'm telling my colleague that everything works, are you sure you're not using some old cached version or something? Nope, he's definitely using the latest version.

More colleagues on the scene. Queue hacker music. Now we're testing the system on their PCs. Different stations, different OS, different browsers - Brave, Chrome, Edge, Firefox. Fedora, Windows 10, Windows 11... It works everywhere. Not a single issue.

We're getting back to our colleague's station. He's clearing cache one more time. It's broken. Anonymous window. Still broken. Another browser... And it works? Why does it work in Edge but not in his - and ONLY HIS - Chrome? Well, at least it's a progress. Maybe some extension breaks it? Nope, no extensions in his anonymous window. Let's restart PC. Didn't help (shocking).

You see, we have this meme going on in our office that if something is acting weird, it might be a problem with DPI. So my colleague decided to change his DPI (well, more like scaling of his GUI in Windows) to 100% instead of whatever he was using. Violá! It is working now! Let's scale it back, and it's broken again.

Now how does this make any sense? How can scaling have any effect on behaviour of double-click in a web component? And only in one browser and not another, and only in a modal window? So my colleague decided to play around with it.

We use a library called Chonky as a base of our file explorer and in the latest version we decided to add a little status bar showing permissions of selected files, their owners and who are the files shared with. Did this little thing somehow break the double-clicks, but only in certain browsers and with certain DPI / scale?

Yes. Yes it did. Before I describe what was actually happening, here are some facts:

• The status bar shows some information about the users as mentioned above. This also includes user avatars.
• When you don't have anything selected, nothing shows in the status bar. When you select a file or a folder, status bar gets filled with stuff.
• The file explorer perfectly fills the modal window, which is dependand on the resolution / size of the browser.
• Status bar doesn't have a predefined height because it wasn't really needed.

So what was actually happening?

Well, we've discovered the element with the avatar that was being rendered in the status bar probably had some sub-pixel level of imperfection when it came to its size and actually could (and did) stretch the height of the status bar. But we are not talking about 1 pixel or more. We are literraly talking about sub-pixel rendering. Something even Ant-man wouldn't see on the subatomic level. Graphically there was basically no change at all and only when my colleague had 150% Windows GUI scale and only in specific browser did it ever cause any problems.

And what does it have to do with double-clicking? Well, since the statusbar technically "slightly changed" (even though not really), it also slightly changed the file explorer itself to fit in the modal window. And that caused re-rendering of the Chonky component. And re-rendering caused the selection to be lost. So the user clicked, a selection was made. New info appeared in the status bar. Component was "technically" being resized and therefore refreshed. The selection was lost. And double click only works in Chonky on the file you already had selected. But you never had anything selected ever because of this bug.

So anyway, I locked the height of the status bar and avatars and now you can double-click.

Not a sentence I thought I will ever say but here we are. FML.