ブログ のお勧め記事

iOS版Chromeで画像が表示されない不具合に対応しました

2016/09/20

今月8日ごろから、iOS(iPhoneやiPad)版のGoogle chrome(バージョン48)で当サイトを閲覧すると、画像が表示されない場合があるという不具合が発生していましたが、昨日その原因が判明し対処しましたのでお知らせします。

iOS版Chrome48で一部の画像が表示されない現象

2月8日頃にiOS版のChromeがバージョン48にアップデートされてから、ブログ記事内の一部の画像が表示されないという現象が発生していました。

当初はGIFなどの特定の画像フォーマットが表示されないかと思いましたが、そうでもなくJPGなどのごく一般的な画像フォーマットでも表示されない画像がある様子。

2016-02-12 22.32.00

PC版やAndroid版のChrome、はたまたiOSでもSafariなら全く問題なく表示されているため、サーバー側の問題というわけでもなさそうです。

原因はmod_pagespeedが生成するwebpファイル

どうしたものかと数日間考えていたところ、「画像フォーマットがwebpになっているのは関係ありますか?」とヒントをくださった方がいました。

「webp ios chrome」で検索してみると、同じ症状に気づかれた方のブログを発見。

このブログはエックスサーバーを利用しており、サイトの高速化のため「mod_pagespeed」をONにしているのですが、mod_pagespeedは相手ブラウザがwebpに対応している場合に画像をwebpで送信する機能があり、どうやらiOS版chrome48でそのwebp画像のレンダリングに失敗しているようです。

iOS版ChromeではWebViewクラスが変更された

上でヒントをくださった方のブログ記事によれば、iOS版chromeはバージョン48からWebViewクラスがUIWebViewからWKWebViewに変更されたとのこと。

http://fuyuki-google-info.blogspot.jp/2016/01/chrome48-ios.html

そうすると、ChromeのバグというよりもWKWebViewのバグという可能性もあるのかもしれません。

そしてSafariはそもそもwebpに対応していないので、サーバー側はjpg等の元のフォーマットで送信しており問題なかった、とそういう訳でした。

サーバー側の対策はwebpの生成を止めること

Google analyticsで調べてみたところ、iOS版のChromeからアクセスしてくださっているかたは1.25%、80人に1人はいらっしゃることが分かりました。

ちょっと無視できない人数ですので対策をとることに。

ということで、上で参照したサイトにもありますが、mod_pagespeedでwebpの生成を一時的に止めることにしました。

方法は、.htaccessファイルに下の一文を書き加えるだけ。

ModPagespeedDisableFilters convert_jpeg_to_webp

さっそくやってみました。

2016-02-13 08.52.11おー、画像が出るようになりました!

iPhoneやiPadのChromeで画像が表示されない人はSafariで開いてみると良いかも

ということで無事にiOS版Chromeでも画像が表示されるようになったのですが、サーバー管理者でなければこの対策はできません。

読者の側の場合、iOS版のChromeで画像が表示されないサイトやブログがあれば、その記事をSafariで開いてみれば恐らく画像が表示されるはずです。

そして、サイト管理者はその現象に気づいていない可能性があるので、メッセージかなにかで伝えてあげると良いかもしれません。

-ブログ

この記事を書いた人

C-STUDY管理人。フリーランスのプログラマー+中国語通訳翻訳+ブロガーをやってます。中国語は独学でHSK8級+中検準1級。中国・中華圏を中心に東アジア~東南アジアが活動範囲です。もっと詳しく

共有する

これは役に立つ!面白い!と思ったら共有してくださるとうれしいです。シェアしていただけると、がぜんやる気がでます^^

C-STUDYの定期読者になりませんか?

ブログの更新情報をメールでお届けします。購読は無料、解除も簡単です。 読者数:246人

関連記事