雑記
2021.08.21 2024.10.01

【現役が語る】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

寄付・ご支援のお願い

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

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

ご支援・寄付のご協力のお願い
ありがとう
ございます

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

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

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

記事・作品が気に入ったら
SNSでシェア・引用

1.シェアについて

赤竹ただきち(以下、当管理者)が運営するウマコセドットコム(以下、当サイト)の内容をシェアする場合、個人サイト・ブログ・サービス・SNSを問わず、URLなどを記載して出典元を明記ください。

明記していただければ、社会通念上の範囲内でご自由にシェアが可能です。

2.記事の参考・引用(転載)

記事の文章表現の流用、抜粋・引用される場合、当管理人までの申告は不要ですが、参照元として記事URLを明記してください。

ご自身で独自に記事・動画作成で当サイト記事内容を参考に留め、ご自身で文章を自作されている場合、URL記載は任意です。

抜粋・引用の場合、掲示板やSNSの場合は文頭に「>」など、オリジナルコンテンツ(コピーコンテンツ)ではないことを明確にしてください。

要約のための一部改変は、記事の目的・意図を大幅に変えなければ可能とします。

3.作品の引用(転載)

当サイトの作品を引用・転載する場合でも当管理者への申告は不要ですが、URL元の記入、もしくは当管理者名・アカウント名などの記載をお願いいたします。

4.キャラクターの使用

当サイトのオリジナルキャラクターは創作性が高い非営利の個人に限り、イラスト・マンガなどに使用できます。非営利・個人の定義はこちらをご参照ください。

制作費・人件費の範囲内であれば、有償配布や支援サイトの掲載も可能としますが、生成AIで作成した作品で当管理者の作品だと誤認させる、有償行為をするのはご遠慮ください。

5.当管理者の著作権

当管理者が作成した文章・画像・デザイン・オリジナルキャラクターや作品などは原則、ご依頼でも著作権は当管理人に属します。

ただしバーチャルVtuberなど、権利者ご自身のキャラクター、または二次創作元のキャラクターなどの知的財産権につきましては、当管理者ではなく元の権利者に属します。

6.禁止行為

以下の行為が見られた場合は、個別のご連絡や法的処置などといった対応をとらせていただく場合があります。

A.二次利用・加工・改変

当サイトの画像・作品・文章・ブログレイアウトなどの悪意ある二次利用・加工・改変行為や、信用毀損・反社会的など、社会通念上問題のある目的での利用する行為。

B.不適切な拡散

特定の単語・見出しに反応したり、記事内容を過度な歪曲・脚色するといった不適切なシェア・引用行為の禁止(誤った解釈のみならず、〈自他問わず〉風評被害や誹謗中傷につながる恐れがあるため)。

C.誹謗中傷

当サイト・他者・企業などを誹謗中傷する目的での引用。また煽り・マウント行為といった、意見・提起・指摘ではなく、人格・風評を著しくおとしめる行動も含む。

7.著作権

当サイトは著作権の侵害を目的とするものではありません。

スクリーンショットや二次創作元の知的所有権は各権利者・団体に帰属しており、各利用規約を確認した上で掲載しています。

有料二次創作は権利元の創作ガイドライン厳守を努めていますが、問題があれば当サイトのお問い合わせよりご報告ください。

8.トラブル

当サイト記事のシェアなどが要因で発生したトラブルなどについては、一切の責任を負いかねます。あくまでも参考・一意見として扱ってください。

当管理者まで直接ご意見・ご指摘を希望される場合は当サイトのお問い合わせからご連絡いただけますと幸いです。

制定日:2017/2/24
改定日:2024/10/1

シェア・引用の前に「規約・ポリシー」をご一読ください(同意したものとみなします)。

記事を特定の単語・見出しなどで判断したり、記載内容の過度な歪曲・脚色、他者を誹謗中傷・バッシング目的のシェア・引用は固くお断りいたします。

シェア内容が問題・風評被害行為だと判断した際、個別にご連絡を差し上げる場合があります。

社会通念上のモラル・リテラシー・マナーの範囲内であればご連絡することはございません。シェア・引用をしていただきありがとうございます。

プロフィール

赤竹ただきち

赤竹ただきちTadakichi Akatake

サイトのURLをSEO的観点から、検索上位のものや記事のURLを書き換えているんだけど、これがなかなか興味深い。

omotenashi(おもてなし)・karoshi(過労死)・tsunami(津波)は日本人も知っている人は多いし、サブカル関連だとhentai(ヘンタイ)・kemomimi(ケモミミ)・mesugaki(メスガキ)も日本語読み表記。

個人的に興味深かったのが、kotobagari(言葉狩り)も日本語読みで表記するらしい。海外だとPC(ポリコレ)だろうけども、漢字・ひらがなの表記にこだわるから、kotobagariなんだろうなと。

イラストレーター・マークアップエンジニア(コーダー)・Webデザイナー・ライターのウサギ好き。多様な絵柄を描け、外国人でも絵でわかるマンガ、ウサギと口内描写にこだわりを持つ。

コーディングとWebデザインは両方可能。納期が短いなどいった案件では、「デザインとコーディングのアドリブ同時進行」という荒業もおこない、SEO施策を意識したマークアップも得意。

フリーランスとの進行ディレクション・指示や、面接担当の経験が幾度もあり、プロ・趣味問わず、絵描きを含めたクリエイティブの姿勢には少々シビア。

「自省・リテラシー・正しい批判の認知・意識向上」をライフワークとし、当サイト記事も「気づき・理解・学ぶ」を全体テーマとして執筆。

当サイトの記事は中学生でも理解できるように計算しながら執筆しており、ネット・SNS上で「わかりやすく参考になる」とご好評の声多数。

「言い訳せずに下手でも自分の弱さを認め、背かず自省して学ぶ意識を忘れない(=謙虚な)人」は、年齢・性別問わず好きなタイプ。

雑記