案件でちょくちょく遭遇するんですけれど、「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を「腐った牛乳」とボロクソに言われ、葬式まであげるレベル。
なぜ、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特有のバグを一日でも早く直してもらいたいものです。
当サイトはみなさまのご支援で、広告なしの実現やコンテンツ維持を行っています。当サイトの情報がお役に立てたり、気に入った作品がもしございましたら、支援のご一考・ご協力のほど、お願いいたします。
- プライバシーポリシー
-
個人情報保護
当サイトや赤竹ただきち（以下、当管理者）宛に送られたメールの内容や差出人、アクセス解析で得た個人情報などは、差出人・閲覧者当人の承諾がない限り、当サイト内やほかのサービスで公開することはいたしません。
絵や記事のシェア
当サイトの絵や記事をシェアされる場合、個人サイト・ブログ・サービス・SNSなどを問わず、URLなどを記載して、出典元を明記ください。明記していただければ、ご自由にシェアしていただいて構いません。
ただし、記事の場合は下記の『禁止行為』のとおり、記事を読まない、特定のワードに反応したようなシェア行為はお断りいたします。
記事の引用（転載）ルール
記事内の文章を引用（転載）される場合、URL元を明記した上で引用要素（blockquote）内に記載してください。掲示板やSNSの場合は、文頭に「>」などをつけ、オリジナルコンテンツ（コピーコンテンツ）ではないことを明確にしてください。
要約のための一部改変は、記事の意図を大幅に変えなければ可能とします。
メールの内容・取り扱い
メールはご意見・ご指摘・ご感想・営業メールのみ受けつけますので、あらかじめご了承ください（当サイトを利用した宣伝・委託行為はお断りいたします）。
下記の『禁止行為』のとおり、メール内容に当管理者や他者へのヘイト行為といった、誹謗中傷が見られた場合、返信を控えさせていただくほか、悪質と判断した場合は法的処置をとる場合があります。
禁止行為
以下の行為が見られた場合は、法的処置などといったしかるべき対応をとらせていただく場合があります。
【二次利用・加工・改変行為の禁止】本サイト内の画像・イラスト・文章・ブログレイアウトデザインなどの悪意ある二次利用・加工・改変行為や、信用毀損・反社会的・社会通念上問題のある目的での利用。
【二次利用・加工・改変行為の例外】シェアや引用（転載）のルール遵守など、社会通念上問題がないケースや、または要約のための文章改変・紹介や参考、プレビュー画像としてのスクリーンショット撮影・トリミング（切り取り）しただけの場合は例外として扱う。
【安易な拡散行為の禁止】特定のキーワードや単語に反応し、記事を読まないままの安易な拡散行為の禁止（誤った解釈のみならず、〈自他問わず〉いわれなき風評被害や誹謗中傷につながる恐れがあるため）。
【誹謗中傷行為の禁止】当サイト・他者・企業などを誹謗中傷する目的での引用行為。また、当管理者あてのメールやSNSのメッセージ・コメントなどにおいても、意見・指摘ではなく誹謗中傷目的のもの。当管理者や他者の人格・風評を著しくおとしめる行為。
著作権
当サイトは著作権の侵害を目的とするものではありません。スクリーンショットや二次創作物の知的所有権はそれぞれの著作者・団体に帰属しており、各利用規約を確認した上で掲載しています。
有料二次創作に関しては、権利元の創作ガイドラインを厳守するように努めていますが、問題があれば当サイトのお問い合わせよりご報告ください。
オリジナル作品や当サイトのレイアウトデザイン・掲載文章の著作物は当管理者が有しており、『禁止行為』のとおり、シェア・引用（転載）のルールが守られていないもの、悪意ある二次利用・改変行為を禁止します。
トラブル
当サイト記事のシェアなどが要因で発生したトラブルなどについては、一切の責任を負いかねます。あくまでも参考・一意見として扱ってください。
また、直接ご意見・ご指摘を希望される場合は、当サイトのお問い合わせからご連絡願います。
リンクについて
当サイトはリンクフリーですが、バナー画像以外の画像直リンク行為や、インラインフレーム表示は固くお断りいたします。
制定日：2017/2/24
改定日：2021/11/07
シェア・引用をされる前にご一読ください（内容に同意したものとみなします）
