Nov 19, 2024 21:00:00

What's causing this strange bug that only occurs when the external monitor is positioned above and to the left of the main monitor?

Josh Tumas, a software engineer on the BBC's design systems team, posted a blog post about the process of investigating the cause of the bug that caused some features on the BBC site to stop working when an external monitor was placed above or to the left of the main monitor.

How a BBC navigation bar component broke depending on which external monitor it was on - Josh Tumath

https://www.joshtumath.uk/posts/2024-11-08-how-a-bbc-navigation-bar-component-broke-depending-on-which-external-monitor-it-was-on/

The header of the BBC's UK domestic website, bbc.co.uk, has a button with an '...' mark to display categories that did not fit on the screen. One day, a member of Tumas' team reported that the button's click event was not being triggered only when the site was opened at home.

The bug could not be reproduced in other people's environments, and the bug did not occur on the same PC when team members were at the office. However, when he went home and connected an external monitor and displayed the browser on that external monitor, the bug started to occur. In addition, the bug occurred in Chrome and Firefox, but it worked normally in Safari, so Tumas said it was a 'really strange bug.'

Continuing our investigation, we discovered that the bug only occurred when the external monitor was moved to the top or left side of the main monitor in the OS settings. When we looked closely at the click event in this state, we found that the properties 'screenX' and 'screenY', which indicate the click location, were set to negative values.

In a multi-monitor environment, browsers generally use one coordinate system to represent the entire screen, but Chrome and Firefox set the origin to the top left of the main monitor. This means that coordinates on the top or left side of the main monitor are negative. On the other hand, Safari always treats the top left corner as the origin, so coordinates never become negative.

BBC uses the coordinates of the click event to determine whether the event was generated by mouse input or keyboard input, and changes the processing accordingly. In the case of a click, the category appears with an animation and the focus remains on the button.

When the button is pressed via keyboard input, the categories appear without animation and the focus moves to the first item.

On the BBC website, the condition for determining mouse input was set to 'X and Y coordinates must be greater than 0', so when the coordinates were negative, it was determined to be 'not mouse input' and no processing was done.