スマホブラウザに背景fixedすると風が吹く

覚書。

CSSでスマホ用背景デザインを

url(http://xxx/zzz_bg.jpg) repeat-y fixed right;

ってな感じで設定してあると、背景がなぜか正しく表示されない。風が吹いたみたいにブレブレ画像になってしまうのだ。

おかしな背景

右端な。

仕方ないので、fixedを外してみたらあっさり直った。

直った

一応、彼岸花の背景なのです。

背景画像が悪いのかと思ったけれど、他の画像にしても同じ現象が起きたので、fixedが良くないんだろう。

ちなみに、iPhone(iOS)で使うブラウザは元からfixedに非対応なので、fixedを指定してあっても背景固定されない(一緒にスクロールしてしまう)が、こんな風が吹いたみたいにはならなかった。

他のAndroidで見ても、古い端末(OSバージョンが4以下)だとちゃんと表示されてたんだけど、Androidが5(kitkatだっけ?)になったらおかしくなったみたいだ。

Android6になったらどーなるんだろう?(自分の持ってるスマホにはまだ降って来ないので未検証)

背景画像にこだわりのある人はfixed使いたいと思うので、ぜひとも対応して欲しい。

参考:スマホで背景fixedしたい時のCSSメモ

いろんな方法で何とかして背景画像を固定させてやる!という方はたくさんいらっしゃるんだしね。

Share Button