Microsoft Edge で画像のheightが30pxにつぶれる(FIXED):メモ

Cat WEBサイト構築 by cubismer
悩み
悩み

常に起こる訳でもなく、原因も特定できず、解決策も見つかっていないのですが、メモに残します。

英語圏の掲示板などで話がされており、続報があった場合に自分でそれらを見やすくするためのメモ記事ですので、いつも以上にメモ書きです。

なお、当記事末尾に追記していますが、2018.6現在はFIXEDとなっています。

画像の高さが30pxにつぶれる


img{
 max-width:100%;
 height:auto;
}

上記はよく使われている指定ですが、Microsoft Edgeでheightが正しく算出されない場合があります。

発生すると、横幅はそのままに高さが30pxに潰れます。30pxの出所はわかりませんが、開発者ツールではautoとなっていました。


img{
 width:auto;
 max-width:100%;
 height:auto;
}

そこで上記のようにwidthをautoにするとどうなるかというと、横幅が縮む場合もありました。
が、必ずしもではなく余計にわからなくなった次第です。

同じページにある、全く同じ指定の画像にもかかわらず症状がでない場合もあり、CSSの指定方法や構造による問題とも思えない状態です。

リロードで戻るが再現できない

実は、リロードすれば正しくheightが算出されて画像のサイズが意図した形に戻ります。

ただし一度リロードすると、キャッシュを消すなどしても縮んだ状態が再現できず、その画像での再調査ができませんでした。

英語圏の情報

私は使用経験がありませんが、「Siteorigin」というWordPressプラグインのサポートフォーラムで2016年5月末あたりに以下の書き込みがありました。

こちらの質問者の方がスクリーンショットと発現したURLを乗せていますので、参考になるかと思います。
ただ、示されたURLを自分で見た際に、問題を確認できたのは1件だけで他は正常に表示されていました。

前述のフォーラムにも出ていますが、Microsoftの Developer technologiesにも投稿があります。

状況

Edge16以降であればこの問題は修正済み、とされています。

原因

後述の経過5の内容が根拠になりますが、WordPressでの対策としてsrcsetの付与停止が示されています。つまりこの問題は以下のような前提と原因になりそうです。

  • Edge 13-15で発生(16以降は修正済み、のはず)
  • srcset属性が存在すると、30px問題が発生する可能性がある

対策

  • Edgeのバージョンを上げる(16以上にする)

諸事情に上記では対応できない場合は以降の方法が使えるかもしれません。ユーザーの閲覧環境は様々なため、クライアントの要望次第ではサイト側でなんとかしないといけない現実はありえますので…。

なお、私自身が効果を確認しているわけではないので実行する場合は自己責任でお願いします。

対策1(WP用)

上記には、WordPress用にEdgeのみsrcset属性の付与を停止するコードが書かれています。


/*
 * Work-around for Microsoft Edge bug ( https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7778808/ )
 */
function custom_edge_browser_fix() {
  global $is_edge;
  if( $is_edge ){
    add_filter('wp_calculate_image_srcset', '__return_false');
  }
}
add_action( 'init', 'custom_edge_browser_fix' );

ただ、その下のコメントでEdge16より下(13-15)にだけ適用するのが妥当であり、このコードのようにEdge全体に対しての指定はやめた方がいいという指摘もありました。

$is_edgeではバージョンの指定ができない(できたらごめんなさい)ので、その意味ではこの方法は影響が大きいのは事実でしょう。

対策2(jQuery使用)

他の方法として、この件についてかかれたEdgeフォーラムにてjQueryを用いた以下のコードを挙げる方もいます。


$(document).ready(function(){
if(window.navigator.userAgent.indexOf(“Edge”) > -1){
$('img[srcset]').each(function() {
$(this).attr('src’, $(this).attr(‘src’)+’?’+Math.random());
});
}
});

jQueryでなくてもいいと思いますが一応引用なのでそのまま。

まとめ

Edge16以降は修正されている、はずです。

経過1

2016年10月現在の情報ですが、近いうちのアップデートで解決を目指しているようです。

経過2

2017年1月現在、未だに解決していないことが伺えます。前項のリンク先より引用します。

Dave L. Jan 4, 2017

My client also noticing this problem. Hello Microsoft? Oct 12, 2016 was almost 3 months ago, did you solved this issue or not?

2016年12月の時点で「Confirmed(Edge側が確認したといういみかと思います)」になっていましたが、現在もFIXEDになることもなくそのままです。

10月の時点で近々のアップデートで対応と書いていたのがこれだけ伸びるとなると、重要度が低いと見なされているのか、根幹部分に触れるような根深い問題かのいずれかなのかもしれません。

どちらにせよ、まだこの問題は未解決といえます。

経過3

2017.8.31に以下のステータスを確認しました。

FIXED, NOT YET FLIGHTED

解決できており、あとは反映待ちという感じでしょうか。

長かったですね…、と言いたい所ですが、いままでの経緯もあるのでFIXEDのみになるまで安心はできません。

経過4

2018.6.26に以下のステータスを確認しました。

FIXED

もう少し前にこうなっていたのかもしれませんが、ともかく長かった。

経過5

上記ページ内の投稿内容を見逃していましたが、2017.11.3のMicrosoft Edge Teamの報告に以下のようにありました。

I think the title is incorrect as the fix is in Edge 16. The issue described above is in 13-15. If you are indeed seeing this in EdgeHTML 16, of which we have verified on all repros we’ve been provided do not repro, please let me know. To aid in the discussion as you noted, I’ll move over to stackoverflow as well.

Edgeの13-15で発生して16では治っているとのことです。
その上で一応追記的に16でも発生しているのなら別で連絡をくれ、stackoverflowにも書くという感じです。

このstackoverflowのページは以下のURLのものです。

上記には、WordPress用にEdgeに対してsrcset属性を付与しないというコードも書かれています。

1人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント:2件

  1. width, height で固定してもダメみたいです。
    Edgeのバグだったんですかね。。

    返信

    1. コメントいただきありがとうございます！

      固定でもだめでしたか…。

      記事末尾に挙げていますリンク先のスレッドタイトルを見ますと、どうやらSrcsetとsizeを指定していると発生する可能性があるようなのですが、この辺が主要因なのかどうなのかもあやふやですね。

      Edge側が対応に動いているようなので、Edgeのバグである可能性はかなり高いと思います。

      件のスレッドに修正完了の知らせが載るとは限りませんが、定期的に様子を見て、良い知らせがあればこの記事に追記したいと思います！

      返信

コメント欄