web-dev-qa-db-ja.com

IEでスクロールすると、固定背景画像が移動するのはなぜですか？

background-image 修繕。

my blog にあるように、background-imageは、IE 11。

どうすれば修正できますか？

これは私のCSSです：

background-image: url("./images/cover.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
cssinternet-explorerbackground-imageinternet-explorer-11
17
the1900

これは、Internet Explorerの修正された背景画像の既知のバグです。私たちは最近、この動作を改善するためにいくつかの作業を行い、Windows 10上のInternet Explorerのプレビュービルドのアップデートを出荷しました。MacOS XまたはWindowsから今日の変更をテストできます http://remote.modern.ie 。

IE 11 and IE Remote Preview。マウスホイールでスクロールすると、固定背景画像がジャンプしないようになっていることに注目してください（またはジッター）Internet Explorer 11と同じように。

enter image description here

10
Sampson

私の最後の修正は、私が見つけたすべての答えに基づいています：

Edge/ie11/ie10のメインCSS

/*Edge*/
@supports ( -ms-accelerator:true ) 
{
    html{
        overflow: hidden;
        height: 100%;    
    }
    body{
        overflow: auto;
        height: 100%;
    }
}
/*Ie 10/11*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) 
{
    html{
        overflow: hidden;
        height: 100%;    
    }
    body{
        overflow: auto;
        height: 100%;
    }
}

Ie9、ie8、ie7の場合、コードを（メディアクエリなしで）別のハックシートに追加しました。

<!--[if lte IE 9]>
    <style type=text/css>
       html{
           overflow: hidden;
           height: 100%;    
       }
       body{
           overflow: auto;
           height: 100%;
       }
    </style>
<![endif]-->
24
twicejr

あなたのサイトのcssルールの一部を無効にしようとしましたが、htmlタグの背景プロパティ（background：#fff;）を削除すると、ページがスムーズにスクロールします。試してみて、うまくいくかどうか教えてください。

更新：

私も回避策を見つけました ここ ：

$('body').on("mousewheel", function () {
  event.preventDefault();

  var wheelDelta = event.wheelDelta;

  var currentScrollPosition = window.pageYOffset;
  window.scrollTo(0, currentScrollPosition - wheelDelta);
});
10
radarek

これは私にとってトラックパッドで動作しているようです。これは、raderekの回避策に基づいています。

    if(navigator.userAgent.match(/Trident\/7\./)) {
    $('body').on("mousewheel", function () {
        event.preventDefault();

        var wheelDelta = event.wheelDelta;

        var currentScrollPosition = window.pageYOffset;
        window.scrollTo(0, currentScrollPosition - wheelDelta);
    });

    $('body').keydown(function (e) {
        e.preventDefault(); // prevent the default action (scroll / move caret)
        var currentScrollPosition = window.pageYOffset;

        switch (e.which) {

            case 38: // up
                window.scrollTo(0, currentScrollPosition - 120);
                break;

            case 40: // down
                window.scrollTo(0, currentScrollPosition + 120);
                break;

            default: return; // exit this handler for other keys
        } 
    });
}
4
Darren Alfonso

twicejr による以前の回答が機能しないため、最新のEdgeリリースではこれを使用します。

/*Edge - works to 41.16299.402.0*/
@supports (-ms-ime-align:auto) 
{
    html{
        overflow: hidden;
        height: 100%;       
    }
    body{
        overflow: auto;
        height: 100%;
        position: relative;
    }
}

/*Ie 10/11*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) 
{
    html{
        overflow: hidden;
        height: 100%;    
    }
    body{
        overflow: auto;
        height: 100%;
    }
}
3
Peter O Brien

私はbox-shadow固定背景と重なる要素から。

1
Rudey

ターゲットIEで、代わりにスクロールを使用すると問題が解決するようです。

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .className {
        background-attachment: scroll;
    }
}
1
John Churchley

このスクリプトの使用： https://stackoverflow.com/a/34073019/795822

Edgeブラウザを検出するために、htmlとbodyのスタイルを変更しました。

if (document.documentMode || /Edge/.test(navigator.userAgent)) {
   document.documentElement.style.overflow = "hidden";
   document.documentElement.style.height = "100%";
   document.body.style.overflow = "auto";
   document.body.style.height = "100%";

}

0
Dasha

前の回答に基づいてPageUPおよびPageDOWNキーを処理する方法を次に示します。

if(navigator.userAgent.match(/Trident\/7\./)) { // if IE
    $('body').on("mousewheel", function () {
        // remove default behavior
        event.preventDefault(); 

        //scroll without smoothing
        var wheelDelta = event.wheelDelta;
        var currentScrollPosition = window.pageYOffset;
        window.scrollTo(0, currentScrollPosition - wheelDelta);
    });
    $('body').keydown(function (e) {
        var currentScrollPosition = window.pageYOffset;

        switch (e.which) {
            case 33: // page up
                e.preventDefault(); // prevent the default action (scroll / move caret)
                window.scrollTo(0, currentScrollPosition - 600);
                break;
            case 34: // page down
                e.preventDefault(); // prevent the default action (scroll / move caret)
                window.scrollTo(0, currentScrollPosition + 600);
                break;
            case 38: // up
                e.preventDefault(); // prevent the default action (scroll / move caret)
                window.scrollTo(0, currentScrollPosition - 120);
                break;
            case 40: // down
                e.preventDefault(); // prevent the default action (scroll / move caret)
                window.scrollTo(0, currentScrollPosition + 120);
                break;
            default: return; // exit this handler for other keys
        } 
    });

}
0
BigPino

以前の回答でIE11の問題が修正されました！ただし、小さな変更を加える必要があったので、F5（またはCtrl + F5）を使用してページを更新することもできます。

// IE 11の場合、これにより、スクロールバーを使用せずに写真の区切りの上をスクロールするときの問題が修正されます

 if(navigator.userAgent.match(/Trident\/7\./)) {
    $('body').on("mousewheel", function () {
        event.preventDefault();

        var wheelDelta = event.wheelDelta;

        var currentScrollPosition = window.pageYOffset;
        window.scrollTo(0, currentScrollPosition - wheelDelta);
    });

    $('body').keydown(function (e) {

        var currentScrollPosition = window.pageYOffset;

        switch (e.which) {

            case 38: // up
                e.preventDefault(); // prevent the default action (scroll / move caret)
                window.scrollTo(0, currentScrollPosition - 120);
                break;

            case 40: // down
                e.preventDefault(); // prevent the default action (scroll / move caret)
                window.scrollTo(0, currentScrollPosition + 120);
                break;

            default: return; // exit this handler for other keys
        } 
    });
}
0
user4434911

TwicejrのCSSソリューションを試しましたが、Edge/15.15063では動作しません。ダーシャの答えはEdgeの問題を解決しましたが、IE 11.は解決しませんでした。私はdocument.documentMode状態が不完全でした。 document.documentmodeは、IE 8+を除くすべてのブラウザでundefinedを返します。これにより モード番号を返します 。これにより、次のコードで検出されますIE 8+およびEdgeの両方で、背景画像の問題を解決します。

if ((document.documentMode != undefined) || (/Edge/.test(navigator.userAgent))) {
document.documentElement.style.overflow = "hidden";
document.documentElement.style.height = "100%";
document.body.style.overflow = "auto";
document.body.style.height = "100%";}

JS Fiddle これは、矢印キーとトラックパッドのスクロールでも機能します。IE7については考慮していません。

0
Iain Wilson