web-dev-qa-db-fra.com

IE 10 & 11 font sauter les 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 position:fixed ainsi que. Voici un exemple avec une image d'arrière-plan fixe:

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

Voici un exemple de code:

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

Existe-t-il une solution pour garder l'arrière-plan toujours en IE 10 et 11?

cssimageinternet-explorerbackgroundfixed
53
ropo

Je sais qu'il est un peu tard pour une réponse mais j'ai eu le même problème et j'ai pu le corriger en ajoutant ces attributs à 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, alors soyez prudent si vous utilisez quelque chose qui repose sur de tels événements. codepen.io/anon/pen/VawZEV?editors=1111 (débordement: caché, les événements de défilement ne fonctionnent pas) codepen.io/anon/pen/PNoYXY?editors=1111 (débordement: auto, feu des événements de défilement) - Dan Abrey

Cela peut donc entraîner des problèmes dans vos projets. Mais je ne vois pas d'autre moyen de contourner ce bogue dans IE.

49
Lars

Cela ressemble à un bogue z-index, essayez d'ajouter z-index: 1.

En examinant cela, j'ai trouvé que la meilleure façon de déboguer est de:

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

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

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

J'ai ensuite constaté que l'ajout d'un z-index aux éléments fixes a résolu le problème. (par exemple z-index: 1)

J'ai également découvert qu'une fois qu'une position est définie sur un élément enfant, le bogue se présente lui-même à partir de ce point vers le bas/vers l'avant. Vous devez donc vous assurer qu'aucun des éléments enfants n'a de position définie, ou s'ils le font, vous définissez explicitement une position sur chaque enfant.

Par exemple.

<!-- 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>

Il est réparable, mais nécessitera quelques ajustements!

23
uniquelau

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

Déplacer la propriété CSS "background" vers l'élément BODY. Actuellement, il se trouve 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;
    }
8
arni

essayez de désactiver l'option de défilement fluide.

Options Internet - Onglet Avancé - Utiliser le défilement fluide

c'est comme un bug de rendu .... MS IE l'équipe étudie ....

4
yubi848484

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

(désactiver le défilement fluide sur IE fonctionnaient tout en ayant la propriété z-index mais ce n'est pas une solution car les utilisateurs l'auraient probablement activé par défaut).

2
Rafael Lüder

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

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