ブラウザ間差異いろいろ

こんにちは。土居です。1年はあっという間でして、私の今年最後のブログ投稿になります。今回は、現在開発中のシステムの検証において、ブラウザによる差異が見つかった中からいくつかご紹介したいと思います。

IE, Edge

• inputタグのtype="number"のスピン（増減ボタン）が表示されない
  Chromeでは以下のようなスピンが表示されますが、numberが対応しておらず、textと変わらない見た目になるようです。特に必要でなければ、非表示にして統一するのが良いでしょうか。
  

• Fileコンストラクタ未対応 (※Fileインターフェースはある。)
  File()が無い環境の場合はBlob()を用いるように制御していたのですが、IEで動かすまでは常にFile()が用いられていたためにnameプロパティが前提となっている処理がエラーになってしまいました。。
  参考:MDN File.File()

• ライブラリでIEは未対応のES6のアロー関数が使われていた
  構文エラーはpolyfillでは補えず、思い切りエラーが出てしまい最初のログイン画面すら表示されてませんでした。。岡本が気合いで書き換えて対応してくれました！！
  参考:MDN アロー関数

WindowsのChrome

• inputタグのtype="file"で選択時にfile.typeが空になる。
  バリデーション処理でtypeを判定していた箇所が無効となっていたため、単純に拡張子を見るように。

• inputタグのacceptでMIMEタイプ"text/csv"による選択時のガードが効かない
  こちらは拡張子指定(.csv)で対応しました。

FireFox

• inputタグにrequiredをつけている場合、未入力でsubmitするとhtmlがエラーを表示してくれますが、初期表示時からエラー時のような赤色の枠が出てしまっていました。こちらはinput:requiredのスタイルを調整して対応。
  

まとめ

他にも表示のズレが起きたりなどたくさんありました。実際に動かしてみるまでわからないので、珍しい問題が起きると仕方ないとは思いますが、よくありそうなものについては知識を蓄えていきたいと思います。

どいけん