Pourquoi un arrière-plan fixe-image déplacer lorsque le défilement sur IE?

Je suis en train de faire background-image fixe.

Comme vous le voyez dans mon blog, le background-image est en mouvement lorsque le défilement sur IE 11.

Comment puis-je résoudre ce problème?

C'est mon CSS:

background-image: url("./images/cover.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;

InformationsquelleAutor the1900 | 2015-01-15

9

C'est un bug connu avec l'arrière-plan fixe des images dans Internet Explorer. Nous avons récemment fait un peu de travail pour améliorer ce problème et l'ont envoyé des mises à jour de notre preview version de Internet Explorer sur Windows 10. Vous pouvez tester les modifications apportées aujourd'hui à partir de Mac OS X ou Windows sur http://remote.modern.ie.

Ci-dessous est l'avant et l'après, c'est à dire 11 et IE Distance de Prévisualisation. Remarquez comment le défilement avec la molette de la souris ne provoque plus l'image de fond fixe pour sauter (ou gigue) comme il l'a fait dans Internet Explorer 11.
- merci pour la réponse mais voir [thisblog[(est0que.tistory.com/category) comme vous pouvez le voir, il ne bouge pas lorsque la touche scroll même navigateur est IE. J'ai copié son code et de l'adapter. mon blog encore de défilement...
- ce bug n'est pas présent lorsque vous définissez background-attachment pour l'élément de corps.
- Sampson quand prévoyez-vous de mise à jour avec le correctif pour ce bug? Quelle version de IE & les fenêtres sont affectés? J'ai essayé par exemple avec win7 + IE11 et le bug n'est pas présent. D'autre part IE11 + win8.1 a ce bug. Est-ce lié à windows et/ou la version de IE ou peut-être d'autres facteurs sont importants?
- Sampson j'ai eu à utiliser la solution de contournement connect.microsoft.com/IE/feedback/details/819518/.... J'ai un Win8.1 ordinateur portable avec écran tactile et avait encore la question (Acer Aspire S7-392)
- Ne fonctionne pas sur Windows 10 + IE 11. @Sampson quand prévoyez-vous de mise à jour avec le correctif pour ce bug?
- Internet Explorer 11 sur Windows 10 n'est pas d'obtenir (beaucoup, le cas échéant) de la fonction du travail effectué. Des bugs avec la plate-forme web dans internet explorer 11 sont susceptibles de rester pour de bon dans IE 11. S'il vous plaît tester à Bord, et signaler les problèmes que vous y rencontrer.
- sans rapport? mais utile pour l'élaboration d'une solution de contournement: stackoverflow.com/questions/29648924/...
- Il est bon de savoir, mais nous, les développeurs web ont encore à faire face à l'ancienne, non mise à niveau des installations (beaucoup de gens ne savent même pas ce que Edge est)
- Je le comprends; mais tous les signes indiquent les utilisateurs d'Internet Explorer sont constamment en mouvement jusqu'à des versions plus récentes; c'est de plus en plus le cas dans les environnements d'entreprise ainsi. L'avenir est prometteur 🙂 Si vous rencontrez des problèmes avec IE, je suis heureux de l'aider à identifier des solutions de rechange.
- Il suffit de pointer ce bug toujours existe en version de Bord 38.14393.0.0.
- En août 2017, ce bug est encore présent sur Windows 10 + IE11 (c'est à dire, Microsoft la plus largement adoptée version de l'OS et plus populaires de la version du navigateur). Voyant qu'ils avaient un correctif complet pour les autres OS cibles de 2,5 ans, il serait bon de savoir pourquoi ils sont en refusant de rouler pour une plate-forme que le fait de... :\
InformationsquelleAutor Sampson

Ma correction finale est basée sur toutes les réponses que j'ai trouvé:

Sur la css principale 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 les media query) dans un autre hacksheet:

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

Cela ne fonctionne pas pour la dernière version de Bord, qui présente également ce problème.
Ruud Prêteurs, j'ai mis à jour la réponse, donc ça devrait marcher en Bord ainsi.

InformationsquelleAutor twicejr

10

J'ai essayé de désactiver certaines des règles css sur votre site et quand j'ai enlever propriété de l'arrière plan (background:#fff;) pour la balise html puis la page est de défilement en douceur. S'il vous plaît, essayez-le et dites si cela fonctionne pour vous.

Mise à jour:

J'ai aussi trouvé de solution ici:
```
$('body').on("mousewheel", function () {
  event.preventDefault();

  var wheelDelta = event.wheelDelta;

  var currentScrollPosition = window.pageYOffset;
  window.scrollTo(0, currentScrollPosition - wheelDelta);
});
```
- Ce n'résoudre le problème pour moi sur Win8 - IE11
- Cela fonctionne pour la roulette de la souris, mais si vous utilisez votre pavé tactile, touches haut/bas ou de l'écran (toucher/glisser) pour faire défiler le bug est toujours là.
InformationsquelleAutor radarek

Cela semble être au travail sur les trackpads pour moi. Il s'appuie sur radarek de solution de contournement.

    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
        } 
    });
}

Ce travail est pour moi, avec molette de défilement et les touches fléchées. Je n'ai pas de pavé tactile pour faire des tests. Sur les touches, si, j'ai déplacé les preventDefault dans le cas. Sinon, toutes les autres touches sont bloqués ce qui le rend si vous ne pouvez pas saisir de texte dans des formulaires.
Notez que l'utilisation de cette application prend à l'écart de l'animation que le navigateur natif s'applique à la faire défiler "morceaux", de sorte que le résultat final est un plus "agitées" de défilement de l'expérience. Mais vous pouvez ajouter une animation à cette mise en œuvre pour essayer d'obtenir que le défilement fluide se sentir de retour. Peut-être quelque chose comme ceci: stackoverflow.com/a/26798337/718325

InformationsquelleAutor Darren Alfonso

Pour les dernières bord de libération de l'utiliser, comme avant de répondre par twicejr 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%;
    }
}

Cela fonctionne très bien! Mais j'ai un collant menu qui est fixée sur le dessus quand le défilement vers le bas. Lors de ce hack est appliquée, le menu n'est pas collant plus dans IE (menu défiler vers le haut et ne pas se fixe sur le dessus). Que puis-je faire pour résoudre le problème dans IE sans perdre mon collant menu?

InformationsquelleAutor Peter O Brien

1

Cible IE et à l'aide de défilement s'affiche à la place pour résoudre le problème.
```
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .className {
        background-attachment: scroll;
    }
}
```
- Cela ne fonctionne pas pour la dernière version de Bord, qui présente également ce problème.
- La valeur scroll n'a pas le même effet que cover. Donc ce n'est pas la résolution du problème.
InformationsquelleAutor John Churchley
1

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

InformationsquelleAutor Rudey

La réponse précédente fixé mon problème dans IE11!
Cependant, j'ai dû faire un petit changement de sorte qu'il sera aussi permettez-moi de rafraîchir la page à l'aide de la touche F5 (ou Ctrl+F5):

//Dans IE 11 cela résout le problème lorsque vous survolez une photo de pause sans l'aide de 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
        } 
    });
}

InformationsquelleAutor

L'aide de ce script: https://stackoverflow.com/a/34073019/7958220

Pour détecter le bord de navigateur, j'ai ensuite changé le style du html et du corps.

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%";

}

InformationsquelleAutor Dasha

0

J'ai essayé twicejr CSS solution mais ça ne fonctionne pas en Edge/15.15063. Dasha réponse a résolu le problème en Bord mais pas IE 11. J'ai remarqué que le document.documentMode condition n'était pas complète. document.documentmode sera de retour undefined pour tous les navigateurs sauf IE 8+ qui retour du mode numéro. Avec cela, le code suivant va détecter à la fois IE 8+ et Edge et résoudre l'image de fond du problème.
```
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 aussi avec la touche flèche et track-pad de défilement.
Je ne donne aucune considération pour IE7-

InformationsquelleAutor Iain Wilson

Ici est une façon de gérer les PageUP et PageDOWN basé sur les 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
        } 
    });

}

InformationsquelleAutor BigPino

Vous devez vous connecter pour publier un commentaire.