外部モニターがメインモニターの上部と左側に配置されている場合にのみ発生する奇妙なバグの原因は？

BBCのデザインシステムチームに所属するソフトウェアエンジニアのジョシュ・トゥマス氏が、外部モニターがメインモニターの上部または左側に配置されている場合にBBCのサイトの一部の機能が動かなくなるバグについて原因調査の過程をブログに投稿しました。

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/


BBCのイギリス国内向けサイトである「bbc.co.uk」のヘッダーには、画面に入りきらなかったカテゴリを表示するための「…」マークのボタンが存在しています。ある日、トゥマス氏のチームメンバーがこのボタンについて、「自宅でサイトを開いた時のみボタンのclickイベントが発生しない」と報告しました。


他の人の環境では再現できなかったほか、チームメンバーが会社に居るときは同じPCでもバグが発生しませんでした。しかし、家に帰って外部モニターを接続し、その外部モニターにブラウザを表示させるとバグが発生するようになったとのこと。その他、ChromeおよびFirefoxではバグが発生するもののSafariでは正常に動作しており、「実に奇妙なバグ」だとトゥマス氏は述べています。

調査を続けると、OSの設定で外部モニターをメインモニターの上部か左側に移動した時のみバグが発生することが判明。この状態でclickイベントを詳細に観察すると、クリックした場所を示す「screenX」「screenY」というプロパティに負の数が設定されていました。


マルチモニター環境においてブラウザは画面全体を大きく1つの座標で示しますが、ChromeとFirefoxでは原点がメインモニターの左上に設定されていたとのこと。つまり、メインモニターの上側や左側では座標が負の数になってしまいます。一方、Safariは常に一番左上を原点として扱うため座標が負の数になりませんでした。

BBCではclickイベント発生時の座標によってイベントを発生させたのが「マウス入力」なのか「キーボード入力」なのかを判別し、処理を変更しているとのこと。クリックの場合、カテゴリはアニメーションとともに出現し、フォーカスはボタンのままです。

キーボード入力によりボタンが押された場合、アニメーション無しでカテゴリが出現し、先頭のアイテムにフォーカスが移動します。

BBCのサイトではマウス入力の判定に「XYそれぞれの座標が0より大きい」という条件を設定していたため、座標に負の数が入ったときに「マウス入力ではない」と判定されて何の処理も行われなかったというわけです。