web-dev-qa-db-fra.com

Pourquoi une image d'arrière-plan fixe se déplace-t-elle lors du défilement sur IE?

J'essaye de faire background-image fixe.

Comme vous le voyez dans mon blog , le background-image se déplace lors du défilement sur IE 11.

Comment puis-je réparer cela?

Voici mon 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

Il s'agit d'un bogue connu avec des images d'arrière-plan fixes dans Internet Explorer. Nous avons récemment effectué des travaux pour améliorer ce comportement et avons envoyé des mises à jour de notre version préliminaire d'Internet Explorer sur Windows 10. Vous pouvez tester les modifications aujourd'hui depuis Mac OS X ou Windows sur http://remote.modern.ie .

Ci-dessous se trouvent l'avant et l'après, IE 11 et IE Aperçu à distance. Remarquez comment le défilement avec la molette de la souris ne fait plus sauter l'image d'arrière-plan fixe ( ou gigue) comme dans Internet Explorer 11.

enter image description here

10
Sampson

Ma dernière solution est basée sur toutes les réponses que j'ai trouvées:

Sur le css principal pour Edge/ie11/ie10

/*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%;
    }
}

Pour ie9, ie8 et ie7, j'ai ajouté le code (sans requête média) dans une feuille de hacks distincte:

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

J'ai essayé de désactiver certaines des règles CSS sur votre site et lorsque je supprime la propriété d'arrière-plan (background: #fff;) pour la balise html, la page défile en douceur. S'il vous plaît, essayez-le et dites si cela fonctionne pour vous.

Mettre à jour:

J'ai également trouvé une solution ici :

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

  var wheelDelta = event.wheelDelta;

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

Cela semble fonctionner sur des trackpads pour moi. Il s'appuie sur la solution de contournement de Radarek.

    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

Pour la dernière version d'Edge, utilisez ceci, car la réponse précédente de 2xjr ne fonctionne plus:

/*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

Je viens de tomber sur un cas où j'ai pu réduire le bégaiement en supprimant box-shadow à partir d'éléments qui chevauchent l'arrière-plan fixe.

1
Rudey

Cibler IE et utiliser le défilement à la place semble résoudre le problème.

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

En utilisant ce script: https://stackoverflow.com/a/34073019/795822

Pour détecter le navigateur Edge, j'ai ensuite changé le style pour html et 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

Voici un moyen de gérer les touches PageUP et PageDOWN en fonction des réponses précédentes:

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

La réponse précédente a résolu mon problème dans IE11! Cependant, j'ai dû faire un petit changement donc cela me permettra également de rafraîchir la page en utilisant F5 (ou Ctrl + F5):

// In IE 11 cela résout le problème lors du défilement d'une pause photo sans utiliser la barre de défilement

 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

J'ai essayé la solution CSS de proudjr mais elle ne fonctionne pas dans Edge/15.15063. La réponse de Dasha a résolu le problème dans Edge mais pas IE 11. J'ai remarqué que le document.documentMode la condition n'était pas complète. document.documentmode renverra undefined pour tous les navigateurs sauf pour IE 8+ qui --- renverra le numéro de mode . Avec cela, le code suivant détectera à la fois IE 8+ et Edge et résoudre le problème d'image d'arrière-plan.

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 pour le code ci-dessus. Cela fonctionne également avec les touches fléchées et le défilement du pavé tactile. Je n'ai pas pris en compte IE7-

0
Iain Wilson