web-dev-qa-db-ja.com

IE 10＆11は、マウスホイールでスクロールするときに固定の背景をジャンプさせる

Windows 8でマウスホイールを使用してスクロールすると、固定された背景画像が狂ったように跳ね返ります。これはIE 10およびIE 11にのみ影響します。これはposition:fixed 同様に。固定された背景画像の例を次に示します。

http://www.catcubed.com/test/bg-img-fixed.html

コードの例を次に示します。

#section{
    position: fixed;
    top:0;
    left:0;
    background-color:#eee;
    background-position: top left;
    background-image: url("images/7.png");
    background-size: auto; 
    background-repeat: no-repeat;
    z-index: 10;
}

バックグラウンドをIE 10および11のままにしておく解決策はありますか？

cssimageinternet-explorerbackgroundfixed
53
ropo

私はそれが答えに少し遅れていることを知っていますが、私は同じ問題を抱えていて、これらの属性を私のcssファイルに追加することでそれを修正することができました

html{
    overflow: hidden;
    height: 100%;    
}
body{
    overflow: auto;
    height: 100%;
}

コメントから：

このソリューションは、スクロールイベントがウィンドウで発生しないようにするため、このようなイベントの発生に依存するものを使用する場合は注意してください。 codepen.io/anon/pen/VawZEV?editors=1111 （オーバーフロー：非表示、スクロールイベントは機能しません） codepen.io/anon/pen/PNoYXY?editors=1111 （オーバーフロー：自動、スクロールイベントが発生）-ダンアブレイ

そのため、プロジェクトでいくつかの問題が発生する可能性があります。しかし、IEでこのバグを回避する別の方法は見当たりません。

49
Lars

これはz-indexのバグのようです。z-indexを追加してみてください：1。

これを見て、デバッグする最良の方法は次のとおりであることがわかりました。

ページの上部に単純な要素を作成します。

 <style>#test {position: fixed; background: red; top: 0; left: 0; width: 4em}</style>
 <div id="test">Test</div>

上記のすべての場合で、これは正しく機能し、スクロールはスムーズです。これは、それができることを証明しています！サイトのコンテキストで機能するように位置が固定された要素を取得できるようになるまで、プロパティをゆっくりと追加し直します。

次に、固定アイテムにz-indexを追加すると問題が解決することがわかりました。 （例：z-index：1）

また、子要素に位置が設定されると、バグはそれ以降/それ以降の自己であることを発見しました。したがって、子要素に位置が設定されていないことを確認する必要があります。設定されている場合は、各子に明示的に位置を設定します。

例えば。

<!-- Works -->
<div style="position: fixed;">
    <div>Nice</div>
    <div>Wicked</div>
    <div>Cool</div>
</div>

<!-- Element with position: relative, experiences the bug -->
<div style="position: fixed;">
    <div style="position: relative;">sad</div>
    <div>sad</div>
    <div style="position: fixed;">happy</div>
</div>

修正可能ですが、微調整が必​​要です！

23
uniquelau

回避策は次のとおりです（Windows 8.1でテスト済み）：

「背景」CSSプロパティをBODY要素に移動。現在、id = "filler"のDIV要素にあります。結果のCSSは次のとおりです。

    body {
        font-family: Helvetica, Arial, sans-serif;
        background: #fff url(blue-kitty.jpg) no-repeat fixed center 100px;
    }

    #filler {
        text-align: center;
    }

    .big-margin {
        margin-top: 500px;
    }
8
arni

スムーズスクロールオプションをオフにしてみてください。

インターネットオプション-[詳細設定]タブ-スムーズスクロールの使用

レンダリングのバグのようなものです。MSIEチームは調査中です。..

4
yubi848484

私の場合の修正は、position：fixed、IEを持つ要素からz-indexプロパティを単純に削除してから、奇妙なちらつきを停止することでした。

（IEオプションでのスムーズスクロールを無効にすると、z-indexプロパティが有効になりますが、ユーザーがデフォルトでオンにする可能性が高いため、これは解決策ではありません）。

2
Rafael Lüder

単に本体コンテナを相対に定義するだけです。

<style>
    body
    {
        position: relative;
    }
</style>
1
netoper