androidの標準ブラウザ（＆数世代前のiPad）、画像角丸対応で軽く詰んだ話

皆さまこんにちは。

ブログ上の自分の表示名忘れてあわてて過去記事さかのぼったweb制作にかかわってる人です。間抜けの極みです。

(てかさかのぼる前にログインしてプロフィール見たらええやんとか今気づいた……)

気を取り直して、今回contentについての話じゃないんかいとツッコミたい方もいらっしゃるかと思いますが今回は別のお話（うん。いないかもしんないな。でもだれかの役に立ったらいいな……）

さて、最近は画像を角丸にするのもcss3を使用するいわゆる「Progressive Enhancement（プログレッシブエンハンスメント）」新しいブラウザで使える機能は使っちゃおうぜ（記事を閲覧するのに問題がない限り）！という考え方で対応していたりします。

先日とある案件で

↑こんな感じの写真を表示したいというご要望がありました。
システムを組み込む都合上、円形に画像を加工して表示させるのはあまりよろしくありません。
画像を登録するたびにいちいち加工するのは効率的に問題がありますからね。

で、クライアントからの要望もありcssでの対応となった訳ですが…
html

<p><img src="画像名"><⁄p>

cssコード

p img{
	background: #eee;
	width: 200px;
	height: 200px;
	padding: 10px;
	border: solid 5px #9C9;
	border-radius: 50%;
	box-sizing: border-box;
}

chrome

firefox


IE11

IE9(IEtester)


iPhone safari

Android(4系) chrome

Android(4系) 標準ブラウザ



……え、ちょ、ん？？？？？
はい、もともとcss3を使用した角丸のレンダリングで少し問題があったAndroidの標準ブラウザですが、バージョンアップして治ったものだと思っておりました（情弱乙）。

ついでにiPad(iOS 5.1.1)のsafari(諸事情によりキャプチャは割愛)でも同じ症状が……
ブルータス、お前もか……

なんとか同じような事例を探すも見つからず………
どうしたものかとのたうちまわり、せめてAndroidの標準ブラウザ（長いよね何度も書くと）だけで効くハックなどないかとこれまた探してみるも見当たらず……

仕方がないので！ブラウザ、及びデバイスを判定して！クラス付けたった！！
Android標準ブラウザとiPadならbodyタグにclassを付けて判別！
そのクラスがついてる時は別のスタイルを適用させる！
と、いう荒技力技。

ちなみに判定+htmlにclassを追加するコードは以下でござい。
（jQueryで動くようになってます）

if(navigator.userAgent.indexOf('Android') > 0 || navigator.userAgent.indexOf('iPad') > -1){
$('html').addClass('otherPtn（任意のクラス名）');
}

ユーザーエージェントというものにAndroidの文字が入っているときは「Androidの標準ブラウザ」
iPadの文字が入っているときは「iPad」で閲覧しているという事になります。
で、この時にhtmlにclass="otherPtn"を設定するよっていうコードなわけです。

さらにこのときの別スタイルはコチラ

.otherPtn p{
	padding: 13px 0;
	position: relative;
}
.otherPtn p:before,
.otherPtn p:after{
	width: 200px;
	height: 200px;
	margin-left: -100px;
	border-style: solid;
	border-radius: 50%;
	display: block;
	position: absolute;
	left: 50%;
	top: 0;
	box-sizing: border-box;
	content: " ";
	z-index: 5;
}
.otherPtn p:before{
	border-color: #eee;
	border-width: 15px;
}
.otherPtn p:after{
	border-color: #9C9;
	border-width: 5px;
}
.otherPtn p img{
	width: 174px;
	height: 174px;
	padding: 0;
	border: none;
	border-radius: 50%;
	box-sizing: border-box;
	position: relative;
}

またもbefore after大活躍！
（この時はimgをくくっているpのbeforeとafter両方使えたからこの荒技が可能だったのだけれども、どちらか片方でも使っていたらまた別の手を考えなくちゃならなかったな……運が良かったというべきなのかしら）

以上画像ひとつに翻弄されのたうちまわる人間の喜悲劇でした。

私の探し方が悪かったのかもしれませんが需要は有りそうだと思ったのでしたためることといたしました。

ではでは。この記事がどなたかの役に立つことを祈って！あでぃおす！