ウェブを悩ませている7つの慢性的なブラウザのバグ

Webブラウザは素晴らしいです。ブラウザがなければ、データやドキュメントをデスクトップ、タブレット、電話に流し込んで、ユーザーや顧客とほぼ同じように接続することはできませんでした。残念ながら、Webブラウザーによって配信されるすばらしいコンテンツはすべて、レンダリングが私たちが望むほどエレガントでなく、バ​​グがない場合、私たちをはるかに苛立たせます。

ウェブサイトの開発に関しては、私たちはブラウザに借金をしているのと同じくらいブラウザに翻弄されています。特にユーザーのマシンがクラッシュすると、プラットフォーム上のグリッチが飛び出します。そして、目立つ、またはフィットするためのそのようなプレミアムとしてのデザインでは、太い線や色の誤用されたタッチは、私たちが作成しようと努力した美的体験を破壊します。線の幅にピクセルを追加したり、テーブルの位置を少しずらしたりするなどの小さな間違いでさえ、それを発見、検証、および回避するコストは言うまでもなく、ユーザーエクスペリエンスを苛立たせる可能性があります。

もちろん、以前はもっとひどいものでした。ブラウザ間の大きな違いは、W3CWeb標準への忠誠によって大幅に解消されました。そして、JavaScriptのハッキングを容易にするだけでなく、ブラウザーが同じではない方法についての論文も提供するjQueryのようなライブラリーの急増のおかげで、残っている違いは一般に無視できます。

これらのライブラリには、ブラウザのバグを凍結する習慣があります。ブラウザ会社が最悪のバグのいくつかを修正した場合、新しい「修正」は古いパッチと回避策を混乱させる可能性があります。突然、「修正」が問題になり、バグを回避するためにジェリーリグした古い安定性が損なわれます。プログラマーは勝てません。

jQueryのようなライブラリによってもたらされる安定性は、ブラウザビルダーがブラウザの更新プロセスを高速化および自動化することも奨励しています。 Mozillaは、Firefoxの新しいバージョンを数か月ごとにプッシュすることに取り組んでいます。以前は、各バージョンがWeb開発者の安定したターゲットであり、IE5などで最適に機能すると主張する小さなGIFをサイトに配置することができました。これで走行距離計が非常に速く回転するため、HTMLがサーバーからクライアントに移動するのにかかる時間内に新しいバージョンのFirefoxがリリースされます。

その間、私たちはブラウザにもっと多くのことをするように頼みます。私の地元の新聞のウェブサイトは私のマシンをひざまずかせます-ポップオーバー広告、自動再生するビデオスニペット、最近の閲覧履歴に合わせて広告をカスタマイズするコードを拡張します。娘が人形のウェブサイトを見ると、JavaScriptは必死になって私に見せるための人形の広告を見つけようとしています。このすべての魔法がCPUを圧迫します。

これはすべて、今日のブラウザのバグはまれですが、特定するのが難しいことを意味します。これは、Webデザイナーや開発者を悩ませている、または多くの場合、単にしつこいブラウザのバグの最新のジャンルを示しています。

レイアウト

最も目に見えるブラウザのバグは、レイアウトの不具合です。 MozillaのBugzillaのバグデータベースには、レイアウトの問題に関する10のセクションがあり、DOM、CSS、またはCanvasに関連するものとして分類されたレイアウトの問題は含まれていません。ブラウザの最も重要な仕事はテキストと画像を配置することであり、それを正しくすることはしばしば困難です。

多くのレイアウトのバグは、ほとんど難解なほど小さいように見えることがあります。たとえば、Bugzillaのバグ1303580は、CSSタグが斜めを要求するときに、イタリックバージョンのフォントを使用するためにFirefoxを呼び出します。おそらく、フォント中毒者だけがそれに気付くでしょう。一方、Bugzillaのバグ1296269は、少なくともWindowsでは、ComicSansの文字の一部が切り取られていると報告しています。フォントデザイナーは区別をします、そしてそれは彼らにとって重要です。すべてのブラウザで正確なルックアンドフィールを取得できない場合、Webデザイナーはおそらく少し過度にイライラする可能性があります。

これらのバグは数百、数千、場合によっては数百万もあります。で、CMSエディターで画像が消え、DOMにのみ表示されるタグにスパンするという問題が発生しました。

メモリリーク

多くの場合、メモリリークに気付くのは困難です。定義上、表示されるプロパティは変更されません。 Webサイトは正しくレンダリングされますが、ブラウザーは事後にクリーンアップされません。リークを引き起こすWebサイトへのアクセスが数回多すぎると、すべてのRAMがロックされ、再利用されないデータ構造が保持されているため、マシンのクロールが遅くなります。したがって、OSは必死に仮想メモリのブロックをディスクに交換し、待機に時間を費やします。最良の選択は、マシンを再起動することです。

メモリリークのバグの詳細は非常に難解である可能性があり、一部のプログラマーが時間をかけて修正するのは幸運です。Chroniumブラウザスタックの問題640578を検討してください。innerHTMLプロパティをいじってDOMの一部を変更すると、メモリリークが発生します。厳密に繰り返されるループ呼び出しrequestAnimationFrameを含むサンプルコードは、問題を複製します。このような問題は数十あります。

もちろん、それは必ずしもブラウザのせいではありません。たとえば、Chromiumの問題640922でも、メモリリークについて詳しく説明し、例を示しています。ただし、さらに分析すると、サンプルコードはDate()時間をテストする途中でオブジェクトを作成しており、おそらくそれらが問題の原因であることがわかります。

閃光

それはかなり公式です。誰もがAdobeFlashがWebにもたらした素晴らしいアンチエイリアスアートワークとWebビデオを忘れています。代わりに、そのせいであるかもしれないし、そうでないかもしれないすべてのクラッシュのせいにします。現在、正式に廃止されていますが、すぐには進んでいません。Web標準を推進している最も先進的な企業のいくつかでさえ、まだページにFlashコードを持っているようです。MySpaceとGeoCitiesのWebサイトの外でFlashコードを見つける頻度に驚いています。

タッチとクリック

特にタブレットや携帯電話がマウスクリックのように動作する場合と動作しない場合があるタッチを生成するようになった今、さまざまなタイプの入力を調整するのは簡単ではありません。この領域にたくさんのバグがあることを発見するのは驚くべきことではありません。Bootstrap JavaScriptフレームワークは、最も腹立たしいバグのヒットリストを保持しており、最悪のバグのいくつかはこのカテゴリに分類されます。

たとえば、Safariでは、タグ(151933)のテキストを指でタップできないことがあります。ブラウザが入力を探すために長方形をシフトしたために、iPadでメニューが機能しない場合があります(150079)。クリックによってアイテムに奇妙な揺れが発生することがあります。これは、エッジの効いたデザイナー(158276)によって意図的に行われたように見える場合もあります。画面上のテキストや画像が期待どおりに反応しない場合、これらすべてが混乱を招きます。

ビデオ

計画は常に、ブラウザ内およびプラグインの世界の外に責任を移すことにより、オーディオとビデオの配信を簡素化することでした。これによりインターフェースの問題は解消されましたが、すべての問題が解消されたわけではありません。ビデオのバグのリストは長く、それらの多くはすべてあまりにも目に見えています。Bugzillaエントリ754753は、「さまざまなゴーストイメージを含む主に赤と緑の斑点」について説明し、Bugzillaエントリ1302991は、「より良い言葉がないために「どもる」」と説明しています。

ブラウザが著作権侵害を防ぐために設計されたさまざまな暗号化メカニズムを統合するにつれて、最も複雑な問題のいくつかが浮上しています。バグ1304899は、FirefoxがAdobeから適切な暗号化メカニズム(EME)を自動的にダウンロードしないことを示唆しています。Firefoxのせいですか?アドビの?それとも奇妙なプロキシですか?

ビデオのバグが引き続き優勢になります。HTML5にビデオタグを追加してWebビデオを他の形式のコンテンツと統合することで、デザイナーには多くの新しい可能性が開かれましたが、それぞれの新しい可能性は、バグや不整合が発生する新しい機会を意味します。

ホバリング

Webページがページ上を移動するマウスを追跡する機能は、Webデザイナーが、画像や単語の背後に隠されている可能性のある機能についてのヒントをユーザーに提供するのに役立ちます。残念ながら、ホバリングイベントは、必ずしもできるだけ早くチェーンを上っていくとは限りません。

たとえば、新しいMicrosoft Edgeブラウザーは、マウスが一部の入力項目にカーソルを合わせているときにカーソルを非表示にしません(817822)。ホバリングが終了しない場合があります(5381673)。ホバーイベントが間違ったアイテム(7787318)にリンクされている場合があります。これらすべてが混乱を招き、かなりきちんとした効果の使用を思いとどまらせます。

マルウェア

ブラウザ開発者にブラウザのバグのすべての責任を負わせたくなりますが、それはしばしば不公平です。問題の多くは、有用な拡張機能またはプラグインを装うように設計されたマルウェアによって引き起こされます。多くの場合、マルウェアは、バックグラウンドでクリックやコマースを密かに盗みながら、本当に役立つことを行います。

問題は、拡張インターフェースが非常に強力であるということです。拡張機能は、すべてのWebサイトに任意のタグとコードを挿入できます。右手では、これは非常にクールですが、拡張機能からの新しいコードがWebサイトからのコードにどのようにぶつかるかを簡単に確認できます。何?$関数の動作を再定義したくありませんか?

これは、非常に優れた機能を備えた、深く哲学的な問題ほどのバグではありません。しかし、大きな力には大きな責任が伴います。おそらく、拡張プログラマーが集めることができるよりも大きな責任があります。この問題を調べる最良の方法は、それが私たちユーザーが制御できる1つの領域であることを理解することです。拡張機能をオフにして、問題のないいくつかのWebサイトに限定することができます。APIは日常的に使用するには少し強力すぎます。非常に強力なので、拡張APIをすべての最大のバグと呼びたくなります。しかし、それはそれが私たちのために行うすべてを否定するでしょう。

関連記事

  • jQueryを超えて:JavaScriptフレームワークのエキスパートガイド
  • レビュー:7つのJavaScriptIDEがテストされました
  • HTML5シュートアウト:Chrome、Safari、Firefox、IE、Operaの測定方法
  • レビュー:13のprimo PythonWebフレームワーク
  • 遅延プログラミングの力
  • ダウンロード:開発者のキャリア開発ガイド
  • うまくいく7つの悪いプログラミングのアイデア
  • 私たちが密かに愛している9つの悪いプログラミング習慣
  • 21のホットなプログラミングトレンド-そして21が冷え込む