Firefox:レスポンシブデザインモードでダイアログが出ないバグ

この記事は約3分で読めます。
記事内に広告が含まれています

操作画面

こんにちは、さち です。

先日、Firefox のレスポンシブデザインモードを使って
スマホ用サイトの動作テストをしていました。

しかし、alert() によってダイアログが出るはずのところで
何も起きないという問題が発生。

コードに問題があるのかと思い見直しましたが
タイプミスなどは見つかりません。

どゆこと?

スポンサーリンク

サンプルページの作成

ボタンをクリックするとアラートが出て、背景色がオレンジに変化します。

<div>
  <button>かーん!かーん!</button>
</div>

 

var body = document.getElementsByTagName('body')[0];
var button = document.getElementsByTagName('button')[0];
button.addEventListener('click', function() {
  alert('み・か・ん!');
  body.style.backgroundColor = 'orange';
}, false);

見た目はこんな感じです。
操作画面

レスポンシブデザインモードだとアラートが出ない

  1. レスポンシブデザインモード(Ctrl + Shift + M)にして、ボタンをクリック。
    操作画面
  2. しかし、アラート(ダイアログ)は出ません。
    アラートの処理をすっ飛ばして背景色がオレンジになってしまいました。
    操作画面

レスポンシブデザインモードでないときは
ちゃんとアラートが出るので、コードに問題はありません。
操作画面

場合によっては、alert() の部分で処理が中断されてしまい
それ以降のコードが実行されないこともあります。

今回の例は、「OK」をクリックするだけの alert() なので
不具合とはいえ、大きな支障はないですが
実は、confirm(), prompt() でも同様の症状が出ます。

本来、confirm() では「OK/キャンセル」の選択が行われますが
勝手に「キャンセル(false)」が送られてしまいます。
「OK」のときの動作テストができないので面倒です。

ちなみに、新規作成したプロファイルでも不具合が出たので
アドオンやその他の設定が原因である可能性は低いです。

すでに2年前から確認されているようですが、今も放置されています。
Developer Edititon(Firefox 61) でも直っていないですし
今後も放置され続ける可能性が高そうですね……。

スマホ用サイトの動作テストには Chrome を使った方がいいかもしれません。

コメント

タイトルとURLをコピーしました