月別アーカイブ: 2015年8月

Firefox40に更新してみたら表示不具合?(レイアウト崩れ)(ほぼ総括)

私が総括したわけではないーw 感謝感激おれ秀樹

もずはっく日記: Bug-org 1194055 Size of <input> elements has changed in Firefox 40
http://www.d-toybox.com/studio/weblog/show.php?mode=single;id=2015081600

一番くわしく纏められています。

  1. 障害は日本語windows7,vistaだけのもよう
  2. font-familyの設定をするのではなくwidth,max-widthを設定すべきとのこと
  3. firefox41で修正可能性があること(されない可能性も多分にある)

こーすりゃいいあーすりゃいいなんて一概に言えないなあ。
win7,vista+firefox40の場合のみ発現するなら切り捨てるか個別OS対応するかしてもいいとも思うが今後またへんなシステムフォントを引っ張ってこられてもデザイナーはOSごとの対応迫られて困るわけででもそれはOSのリソース使う以上しかたのないことで→(ループ)

レガシーなメンテナンスほとんどしてないようなウェブサイトや社内ページも保守できたらいいけど全部が全部メンテできるわけでもなく一サービス利用者なだけだったら文句もなかなか通らず、でもそんなメンテしてないとこ使うなよといわれるかもしれないけど必要なサービスなら使わないといけないしさらになんかwikiとかでも問題になってるところがあるらしいし。。。

んーわからんw場末のこんな未熟者が考えてもどうしようもないですね。

旧来OS・システム・ブラウザの挙動・フォントなどなど私は全然知識が足りて無くどうすればいいのかわからんけど、まあ取り急ぎ有益な情報なので。充分自分だけが対応するには助けになります。改めて感謝

 

(2015/08/20 ※追記)
width,fontが設定されて無いフォームについてMS Shell Dlg 2というフォントの平均サイズにてフォームを表示させる対処をする方法が提案・検証されているようです。メイリオの平均サイズがあまりにいままで(MS UI Gothic)と違いすぎるのが問題視されての処置だそうです。少々大きくなるようですがさほど違いが無いらしいらしいらしい…(検証せんの?m(_ _;)m)

(2015/08/28 ※追記)
firefox40.0.3がリリースされました。さっそく更新して自分のレイアウト崩れたサイトみてみたところほぼinputタグの大きさは元通りになっていました。これにて解決です。少々Firefox39から大きくなるとの情報は得ていますが、概ねあまり変わらない程度にまでなったことを確認して一連の事象はFirefox40~Firefox40.0.2までのものと思って解決になります。

Firefox40に更新してみたら表示不具合?(レイアウト崩れ)(※2015/08/15 22:30追記)

んーまだよくは分かっていない。
おさらいとして現象:windows7+firefox40に更新すると<input>要素などの横幅が2倍近くに広がってしまうサイトがある。

私の場合いままで自サイトではcontainerからのフォント指定を継承してメイリオ指定していたのだけど、入力フォントとして扱われずMS UI Gothicが入力用に使われていたのだと思う。
だもんで、単純にサイト製作者側としての対応としてはCSSにて

input{ font-family:MS UI Gothic; }

もしくはtype指定で

input[type=text]{
font-family:MS UI Gothic;
}

とすればwindows7+firefox40での表示は元通りではある。(自サイト+windows7+firefox40で検証済み)
けれどもmac,win10,win8とかは比較検証機材が無いため表示するとどうなるかわからん。
むしろ今までどう表示されていたのかも知りたいところではあるw
もちろん昔からある手入れがあまりされてないようなサイトを表示する場合でもwindows7+firefox40では問題が残り続けるでしょう。
あと社内イントラネットのページもレイアウトが崩れる場合があるので(特に社内だけだと手を抜き易いw)firefoxを許可してる会社でもfirefox40への更新ちょっとまった!状態になるとおもう。

不確実な情報なのであまりよくわからないが原因はなんかメイリオとMS UI Gothicのフォントの横幅の差が酷いらしい。

いくつかあるブラウザの表示差異を埋めるだけでヒーコラ言ってるので、できればOSでの違いまで考慮したサイト作りをさせない方針が示されることを望みます。また何か進展があれば記事を上げます。

(※2015/08/16 21:00ぐらい追記)
fontを決め打ち指定でなくwidth,max-widthをinput要素に指定する方法が提案されています。詳しくは↓で。
Firefox40に更新してみたら表示不具合?(レイアウト崩れ)(ほぼ総括)
http://mayoi-dev.wslab.net/archives/217

Firefox40に更新してみたら表示不具合?(レイアウト崩れ)(※2015/08/14 04:00追記)

やはり問題になってますね。firefoxデフォルトのinput textarea select 内のフォントがMS UI Gothic→メイリオに変更された為ということらしい。
うちのサイトではcontainerにメイリオ指定いままでしててそれが要素に継承されてたはずなんだけどなあ
どうも今まではinput要素そのものにスタイル指定していない限りinput要素があった→中身の文字はMSUIgothic となってたのかなぁ?
どちらが正しいかっつーと今が正しい表示されてるってことか?いやいやwin10やwin8で今まで通り見えてるんだからそれはないか
深まる謎をかかえたまま3日目へ・・・

あとmozillaでのこれの話題。一人現況説明と対応をがんばってる方に感謝と激励を送る。
796 :名無しさん@お腹いっぱい。:2015/08/13(木) 15:06:57.81 ID:8DV7rnJz0
40.0でレイアウトが崩れたサイトがある

Bug 1194055 – Size of <input type=”text” /> elements has changed in Firefox 40

https://bugzilla.mozilla.org/show_bug.cgi?id=1194055

 

(2015/08/14 11:00)
firefox40.0.2が公開されてますね。拙速な行動に定評がある私が更新を試してみましたが、レイアウト崩れは修正されてないようです。継続で。

Firefox40に更新してみたら表示不具合?

firefox40がリリースされたとの事で早速更新してみたのだけど、サイトのhtml中のinputボックスとかselectタグのプルダウンメニューの表示が今までと違ってなんだかおかしい。
inputボックスはサイズがおかしいし、プルダウンメニューはメニュー選択項目にマージンかかってるように隙間が開き過ぎる。
デフォルト入力文字のフォントもなんかおかしいきがする。sizeが効いていないかんじ?

IEとの表示差を比べてみた。2chですらこんなかんじにレイアウトが違って見える。ブラウザ違うからとかでなく以前のバージョンと比べれたら一番よかったのだが、自分のサイトも表示崩れてしまっている。バグならバグで早急に修正してもらいたいのだけどこれが仕様だと言われたらサイトも手直ししなきゃいけないが、なぜか幾つかの同様の報告以外情報が得られない。
firefox使ってる全世界中で確認されていて文句出ていてもおかしくはないというのに。

仕様かバグかだけでもハッキリしてほしい。続報・継続調査で。

20150812iefirefox40

(※2015/08/13追記)
さて1日経過したわけですが同様の症状が出てる人もちらほらネットで見かけます。
今のところwindows8.1,windows10では問題なく、windows7,windowsVistaで正常表示されていないようです。fontが勝手に変わっているとかなんだかOS,fontなにかそのあたりに原因がある模様
また継続調査で。