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

12,860 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%;
  overflow: hidden;
}
body {
  height: 100%;
  overflow: scroll;
}

/* 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',
    });
  }
});

終わりに

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

\ SNSでシェア /

WRITER

nakaya

制作部 nakaya

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

TAGS