IE 10 et 11 font sauter des arrière-plans fixes lors du défilement avec la molette de la souris

Lorsque vous faites défiler avec la molette de la souris dans Windows 8, l’image d’arrière-plan fixe rebondit comme un fou. Cela n’affecte que IE 10 et IE 11. Cela affecte les éléments avec la position:fixed aussi. Y a-t-il un empêchement dans IE 10 et 11?

Voici un exemple avec une image d’arrière-plan fixe:

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

    Je sais que c’est un peu tard pour une réponse mais j’ai eu le même problème et j’ai pu corriger cela en ajoutant ces atsortingbuts à mon fichier CSS

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

    D’après les commentaires:

    Cette solution empêche les événements de défilement de se déclencher sur la fenêtre, faites donc attention si vous utilisez quelque chose qui repose sur de tels événements. codepen.io/anon/pen/VawZEV?editors=1111 (dépassement de capacité : masqué, les événements de défilement ne fonctionnent pas) codepen.io/anon/pen/PNoYXY?editors=1111 (dépassement de capacité : auto, défilement d’événements déclenchés) – Dan Abrey

    Cela pourrait donc causer des problèmes dans vos projets. Mais je ne vois pas d’autre moyen de contourner ce bogue dans IE.

    Cela ressemble à un bogue d’index z, essayez d’append z-index: 1.

    En regardant cela, j’ai trouvé que le meilleur moyen de déboguer est de:

    Créez un élément simple en haut de la page, par exemple

       
    Test

    Dans tous les cas ci-dessus, cela fonctionne correctement et le défilement est fluide. Cela prouve donc que cela peut être fait! Maintenant, ajoutez lentement vos propriétés, jusqu’à ce que vous puissiez récupérer l’élément dont la position est déterminée pour fonctionner dans le contexte de votre site.

    J’ai ensuite constaté que l’ajout d’un index z aux éléments fixes résolvait le problème. (ex: z-index: 1)

    J’ai également découvert qu’une fois qu’une position est placée sur un élément enfant, le bogue se présente de lui-même à partir de ce point. Vous devez donc vous assurer qu’aucun élément enfant ne possède un ensemble de positions ou, si tel est le cas, vous définissez explicitement une position pour chaque enfant.

    Par exemple

      
    Nice
    Wicked
    Cool
    sad
    sad
    happy

    C’est réparable, mais cela va demander quelques ajustements!

    Voici une solution de contournement (testée sur Windows 8.1):

    Déplacez la propriété CSS “background” vers l’élément BODY . Actuellement, il est sur l’élément DIV avec id = “filler”. Voici le CSS résultant:

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

    essayez de désactiver l’option de défilement régulier.

    Options Internet – Onglet Advenced – Utiliser le défilement régulier

    c’est comme un bogue de rendu …. L’équipe MS IE étudie actuellement ….

    Le correctif dans mon cas était de supprimer simplement la propriété z-index de l’élément qui a la position: fixed, IE a alors arrêté le scintillement étrange.

    (La désactivation du défilement régulier sur les options IE a fonctionné avec la propriété z-index, mais ce n’est pas une solution car les utilisateurs l’auraient probablement par défaut).

    il suffit simplement de définir le conteneur de corps à relatif.