CSSのbackground-attachment: fixedの不具合について IE/iOS

455 view

CSSbackground-attachmentプロパティでは、画面スクロールをした際に背景が追従してくるかどうかを設定できます。値を「fixed」にした場合は背景がスクロールに追従してくるようになり、「scroll」にした場合は通常通りコンテンツと一緒にスクロールします。
しかし、値を「fixed」に設定しても、「IEまたはiOS」で表示している場合に不具合が出てしまうようです。
私が実際に作成をしていて遭遇した現象と、どのように対応したかを書こうと思います。

IEで表示した場合

IEで「fixed」を指定した場合、背景画像は追従するものの、画面をスクロールした際に背景がガタガタと動いてしまいます
この現象は<html>がスクロールできる状態だと起きてしまうようです。
対応としては、<html>にoverflow: hidden;を指定してスクロールさせないようにし、
代わりに<body>にoverflow: scroll;を指定することで、<body>でスクロールさせるようにします。

<div id="content">
<div class="example-bg">
<!-- コンテンツ -->
</div>
</div>
<style>
.example-bg {
background: url('./example.png') no-repeat top left;
background-attachment: fixed;
}
/* IE10以前でのみ有効 */
html {
height: 100%\9;
overflow: hidden\9;
}
body {
height: 100%\9;
overflow: scroll\9;
}
/* IE10以降でのみ有効 */
@media all and (-ms-high-contrast: none) {
html {
height: 100%;
overflow: hidden;
}
body {
height: 100%;
overflow: scroll;
}
}
</style>

この方法では、<body>をスクロールさせているので、本来<html>のスクロールを基準に動作しているjavascriptのイベントは動作しません。よって、<body>のスクロールを基準に動作するように書き換える必要があります。
私の場合はjQueryで<html> ( = $(window) ) がスクロールした際の動作を設定していたので、その部分について、「IE」の場合は<body>がスクロールした際に動作するよう設定し直しました。

jQuery(function($){
var ua = navigator.userAgent;
var $scrtgt = $(window); // スクロール対象:<html>
if ( ua.indexOf( 'MSIE' ) > 0 || ua.indexOf( 'Trident' ) > 0 ) {
// IEの場合はスクロール対象を$('body')に
$scrtgt = $('body');
}
$scrtgt.on('scroll', function(){
// スクロールした際の動作
});
});

iOSで表示した場合

background-attachment: fixedは効かず、どういう訳か背景が拡大されて表示されてしまいます。
別途「position: fixed」を指定し画像(<img>)を設置することで、背景追従の擬似的再現はできますが、複数の画像を切り替えたい場合には対応が難しくなります。
これは「iOS」でのみ発生する現象なので、iPhoneiPadの場合では「fixed」を諦め、
background-attachment: scrollと設定し直しました。

jQuery(function($){
var ua = navigator.userAgent;
if ( ua.indexOf( 'iPhone' ) > 0 || ua.indexOf( 'iPad' ) > 0) {
// iPhoneまたはiPadの場合
$('.example-bg').css({
// プロパティ名にハイフンが入っている場合は''で囲む
'background-attachment': 'scroll',
});
}
});

終わりに

今回書いた内容は、私の主観で書いたものですので、必ずしも正しいとは限りませんが、
どなたかの参考になれば幸いです。

WRITER

nakaya

制作部 nakaya

1990年生まれ。新潟出身。
16年8月入社。
趣味:スキー、卓球、バドミントン
犬が好き。

TAGS