How a BBC navigation bar component broke depending on which external monitor it was on
Recently, my team and I fixed an absolutely bizarre bug that only one person in the team could reproduce. And to make it even weirder, she was only able to reproduce the issue when using her work laptop at home; it worked fine with the same laptop in the office.
The BBC's UK website uses a click event to respond to when a user activates the 'More' button. click events aren't just activated by the click of a mouse; they can also be activated by touch and the 'enter' or 'space' keys on a keyboard.
Our 'more' button should open a menu. However, when she was clicking on it at home, the click event didn't seem to do anything. Instead, the menu opened using our no-JavaScript fallback behaviour.
When we looked into it a bit more, we found out that the bug only happened when her web browser window was on one of her external monitors. She had two external monitors and it happened on both. But when she clicked the button on her laptop screen, the button worked as expected.
So why on earth was something like a user's external monitor set up affecting click events on our website? And why was this bug not happening to everyone else in our team who used an external monitor? It was very strange indeed.
