【現役が語る】iOSブラウザは現代のIE6かもしれない【Webデザイン】

案件でちょくちょく遭遇するんですけれど、「ChromeやMacのSafari、Android環境では問題なかったのに、iOS（iPhone）だけにバグが起きてしまう」という事案がままあって、その対応のためだけに遅くまで残業することもあり、悩ましく思っています。

この状態はまさに、「iOSは現代のIE6（インターネットエクスプローラー6）」とも言えるのではないかと、ある意味そう思わざるをえません。

では具体的にどう悩ましく思っているのかを、極力わかりやすく述べていきます。同じく悩んでいる人や、これからWEBデザイナー・フロントエンドとして働こうとしている人にも、知識として知っていただければと。

それから、以下の内容は2021年の現状で書かれている部分は、あらかじめご留意ください。

iOSにだけ起きる代表的なバグ

iOSは悩ましい

まず、iOS特有のバグや症状がどのようなものがあるのか、以下に代表的なものを挙げていきます。

iOSは背景固定と背景切り抜きの併用ができない

現状のiOSでもっとも頭を悩ませるバグが、

background-attachment:fixed; //背景固定
background-size: cover; //背景トリミング（切り抜き）

このふたつのCSS併用がiOSだけできないというもの（MacのSafariでは問題ないのに……）。

背景固定して、閲覧者のデバイス幅に合わせて背景をトリミング加工もするという、現代のデザイン重視のサイトだとよくあるレイアウトが、iOSにだけできないんですよね。

ちなみにiOSで見るとどうなるかというと、原寸サイズ（？）に拡大されてしまい、なんの背景がわからなくなってしまいます。これはデザイン上かなり致命的です。

fixed（完全固定）やsticky（追従固定）といった、さまざまな人が代替案を考案していますが、前者は1ページに一箇所しか使えませんし、後者はその表現のために全体のコードを微調整しなければならず、余計な時間がかかってしまいます。

このバグが厄介（というよりタチが悪い）なのは、ほぼほぼ公式認定のバグであることと、それを数年前から言われているのに、Apple側は未だに修正しないことなんですね。

ここを直してもらえれば残業せずに救われる人が世界中で出るでしょうから、早急に対応してもらいたいものです。

background:fixedでの背景固定はiOS（iPhone）でうまく動かないのでこれを使いましょう｜ホームページ制作のYCOM

【CSS】background-attachment:fixedがスマホだけ効かない原因と対処法｜でざなり

【注意！】iOSでは背景画像が動いてしまう問題について｜Qiita

background-attachment:fixed still not supported?｜Apple Developer Forums

iOS（iPhone10）はSlickの指スライド操作が無効化される

『Slick』という、Webサイト制作会社やフリーランスなら有名な画像スライドがあります。画像スライドというのは、よく企業サイトのトップページを見ると、最初に画像が左右へ動いたり、ふわーっと切り替わる（フェードイン・アウト）アレのことです。

そしてこの『Slick』はオープンソースライブラリということもあって、誰でも自由に使えるコードな上に自由度も高く、さまざまなサイトでも紹介されているほど、重ねるように有名なんですね。こちらの職場でもよく使っています。

しかしiPhone10のiOSブラウザから、「画像スライドを指（タップ操作）でも動かせるようにする」という挙動ができません。

とはいえ、対応するコードが明確にあるということですし、そんなに難しくないですから、業務を圧迫されることもありませんから、それは救いでしょう。

具体的には、SlickのJavascript（JS）のファイルの最後に、

$(document).ready(function () {
    $('.スライドの該当クラス名').on('touchstart', function(){
        return true;
    });
});

これを追記で入れるだけになります。

jQueryとよばれるライブラリが必要であることや、WordPressだと「$」だと動かない問題が起きるため、「jQuery」と書き換える必要も出てくるかもしれません。

これを語ると長くなりますから、よくわからない方は「jQuery 使いかた」で検索してください。

ただ、これを入れてもiOSだけ指スライドしてもコマ送りのようにスムーズにスライドできない場合もあり、検証は必要です。

【JQuery】Slickのスライダーで、iOS10以上でフリックが効かないバグ対応｜MAKOCHIN WEB

slick.jsでフリックの動作が効かないときの対応メモ｜kishiken.com

ほかにも縦横比率を維持する「aspect-ratio」がiOSだけ対応されていなかったり（2021年秋に実装予定）、角丸（boeder-radius）とマウスホバー（:hover）の併用が上手くできなかったりと、細かいところはあるんですが、おおむね代表的かつ、致命的になりかねないバグは上記ふたつでしょうね。

コーダーから嫌われていた『IE6』

IE6対応は
いい思い出

この「特定のブラウザに適応させるためだけに残業や追加業務を強いられる」という部分は、かつてWindowsXPなどで使われていた『IE6』を彷彿（ほうふつ）とさせます。

コーディングやフロントエンド知識がない人からすれば、「IE6の何が悪いの？ みんな使ってたじゃん」となるんですが、IE6は本当にくせ者でした。

当時のIE6全盛期のころの自分はまだ学生で、趣味でサイトを作っていたレベルでしたが、IE6のためだけに適応させる意味不明なコードなどが多々あったのを覚えています。

どのぐらい嫌われていたのかは、以下のサイト様などがわかりやすいため、興味のある方は参考にしていただければと。というか、マイクロソフト公式すらもIE6を「腐った牛乳」とボロクソに言われ、葬式まであげるレベル。

IE6がコーダーに嫌われていたなんて知らなかった｜マイネ王

なぜ、Webサイト制作者からIEは嫌われてきたのか？？｜株式会社アイビーネット

「IE6は9年前の腐った牛乳」――Microsoftがアップグレード呼び掛け｜ITmedia NEWS

IE6の“葬儀”行われる　Microsoftから献花も｜ITmedia NEWS

記事タイトルでは「iOSは現代のIE6かもしれない」とは書いているんですけれど、正直なところ、まだiOSのほうがマシです。そこもまた救いであり、実際、IE6ほど嫌われてはいませんからね。

ただ重ねるように、iOSのためだけにコードを最適化させる気苦労と憤（いきどお）りは変わりません。

最後に：日本のiPhoneシェアは多くないがしろにできない

日本はiPhone使用率が
非常に高い

iOSってコーダーから見ると悩ましい部分が多々あり、かつてのIE6のようなことをしているんですね。しかもMacのSafari上では問題ないことも多々あることから、「おなじAppleのブラウザなのに、開発部署が別なの？」とツッコみたくなります。

これもまたIE6と似ているんですが、iOS（iPhone）の利用者は特に日本が多いため、「iOSの対応は切ればいい」と単純に言えず、ないがしろにできないのも、頭を抱えている部分です。

そのため、コーディングをするWEBデザイナーやフロントエンドエンジニアの人、またはその業界を目指す人は、サブ端末でもいいのでiPhoneの一台ぐらいは持っておいたほうがいいです。

iPhoneというか、スマホ上ではデベロッパーツール（開発者モード）が使えないため、推測上で直すしかありませんが、全くわからないという状況よりかはマシなはずですからね。

Mac環境なら、『Xcode』というアプリケーションを使用して擬似的なiPhoneの再現は可能ですが、高性能なマシンスペックが必要なため、自信がない場合はオススメしません。

どちらにせよ、AppleはiOS特有のバグを一日でも早く直してもらいたいものです。

iPhoneシェア率が異常！世界と逆をいく日本のスマホ市場【2021年5月】｜bitWave

寄付・ご支援のお願い

当サイトはみなさまの寄付・ご支援により、広告なしの実現やサイト運営・維持をおこなっています。

記事や作品が気に入りましたら、寄付や支援サイトのご支援をよろしくお願いいたします。

サイトに寄付する
Ofuse
¥550-

寄付に登録・ログインは不要です。文章を書かなくてもスタンプだけの寄付もできます。

記事の原寸大作品、サンプル黒塗り無しは支援サイトで閲覧できます。

FANBOXは表現規制・規約変更により作品が非公開になる場合があります。

支援サイトについて