http://freecodecamp.comで課題に取り組んでいますが、非常に奇妙な「バグ」に遭遇しました。チャレンジをしているときに (たとえば、これはどのチャレンジでも発生しますが)、[ヘルプ] をクリックしてヘルプ チャットを表示すると、外部モニターがちらつき始め、通常はグリッチが発生します。ヘルプチャットを閉じると、すぐに通常に戻ります。ブラウザーをラップトップの内蔵ディスプレイにドラッグすると、問題は解決します。ちらつきが数秒以上続くと、ディスプレイ上のすべての相対的な位置がずれて、たとえば、画面の上半分が下に表示されたり、その逆になったりします。ヘルプ チャットを閉じて、ディスプレイのプラグを抜き、再び差し込むまで (ディスプレイのオンとオフを切り替えるだけでは十分ではありません)。
スクリーンショットでキャプチャできなかったので、何が起こっているかを示す YouTube のビデオを次に示します。
問題のあるディスプレイは HP 2311xi で、Ubuntu 16.04 で Google Chrome バージョン 55.0.2883.87 を使用しています。このグリッチは他のサイトでも見られましたが、いつもすぐに消えてしまいました。一貫してバグを再現できるコンテキストを見つけたのはこれが初めてです。
ページ ソースを見ると、チャットはGitter サイドカーを使用しているように見えます。デモ サイトのサイドカーなど、他の場所で使用されたサイドカーもこの問題を引き起こすことを確認しました。(問題は Gitter サイドカー自体にあるのではなく、Web 上の他の場所でも使用されている何かに問題があると思います)。
JavaScript の学習者として、またこのようなことに一般的に興味を持っている人として、JavaScript または他の場所で何が外部ディスプレイにこの種の影響を与える可能性があるのか 疑問に思っています。
アップデート：
そこで、古い Dell モニターを接続して、モニターに固有のものかどうかを確認することにしました。そのモニターに表示されているブラウザーで Gitter サイドカーを開くと、ほぼ瞬時にモニターがスリープ状態になりました。画面が真っ暗になり、電源ランプが点灯しました。オレンジなどに変更されました。明らかにハードウェアに固有のものではありませんが、異なるハードウェアに異なる影響を与えます...
更新 2:
Firefox でも同じことが起こりますが、これは驚くことではありません。しかし、私が驚いたのは、チャット ウィンドウが既に表示されているhttps://gitter.im/gitterHQ/sidecar-demoにアクセスした場合です(サイドカーをスライドさせるためにボタンをクリックする必要がある上記の他のリンクとは異なります)。 ）、そしてこのサイトはブラウザでJavaScriptを無効にしても同じ不具合を引き起こします...
更新 3:
Gitter サイドカーのない別のサイトでこの問題を経験した後、原因をさらに絞り込むことができました。このようなリンクが表示された場合 (Gitter サイドカー デモを含む多くのサイトにあるため):
これは問題を引き起こすのに十分です。Chrome dev tools で css のプロパティを切り替えてみると、1px dotted black境界線が引き金になりそうなことがわかりました。次のコード行は、再現するのに十分です。
<a href="#" style="border-bottom: 1px dotted black">This is a killer link</a>
境界線をそれ以上1pxにすると、それは発生しません (ブラウザーで 100% のズーム レベルと のサイズで停止することがわかりましたが、1.25pxそれでも < で発生し1.25pxます。プロパティをblack削除したり、他のものに色を付けたりするdottedと、グリッチは発生しません。
最後の注意点として、上記のリンクのスクリーンショットを開くと、問題のリンクのスクリーンショットを表示するだけで問題が発生し、ズームインして点線の境界線が太くなるようにすると問題が解消されることがわかりました (そのままです)。ブラウザの場合）。
これらの最後のいくつかの点は、問題がJavaScript によってまったく引き起こされていないことを示しており、スクリーンショットを表示するだけで問題を再現できるため、ブラウザーに直接関係していないと思います.