SCSS (Sass): CSS トラブルシューティング

1. Android で position: fixed している要素が消える

Android 4.x 標準ブラウザで気づいた。

position: fixed している要素の子供の要素で text-indent: -9999px; とかしてると消える。

代替 CSS:

text-indent: 100%;
white-space: nowrap;
overflow:    hidden;

 

2. position: fixed が fixed されない。

iOS 7.x Safari で気づいた。

親で -webkit-transform / transform を与えていると、子の要素が position: fixed されない。

UI 考え直そうぐらいしか解決策なさそう。
アプリじゃないのでサイドバーとか考えないでくださいという何かの意思が働いている気がしている。

 

3. transform: translate3d(10,0,0) 効かない

Android 2.x 標準ブラウザで気づいた。

2.x 系とかでは transform: translateX(10) translateY(0); とかにする。3D 系は使えない。
Android 2.x 系で親の要素が transform しているとき、子の要素で transform すると思いっきりバグるので、変形させる要素は独立させる。または重ねがけない。

 

4. border-radius 無邪気に使うと重い

これと overflow: hidden; で画像が丸くできるよ〜わ〜いと言って、
画像全部これで丸くしてるとスクロールさせたときに引っかかったりして操作感キモいサイトになる。(iPhone 4S ぐらいでも。)

CSS3 系スタイルは貧弱なデバイスでは辛いのでパフォーマンス上げたいときは多用要注意。

 

5. font-size: 10px 以下にならないデバイスがある

有名なクソ端末(Galaxy S3)で発生。

文字小さくデザインしすぎるデザイナーに提言する or CSS3 で無理矢理小さくする。

-webkit-transform: scale(0.9);
transform: scale(0.9);