web-dev-qa-db-fra.com

Comment forcer ie8 à repeindre après avoir ajouté une classe à un élément dom

Dans ie8, si les éléments ne "repeignent" pas le css associé lorsque vous modifiez le nom de la classe, comment forcer le navigateur à actualiser et à ne pas supprimer les performances de ie8?

Cet article ( Comment puis-je forcer WebKit à redessiner/repeindre pour propager les changements de style? ) a suggéré d’appeler offsetHeight, ce qui force le repeint.

Ce message ( http://www.tek-tips.com/viewthread.cfm?qid=1688809 ) comportait un commentaire suggérant d'ajouter et de supprimer une classe de l'élément body.

Ces deux approches ont tué ie8 performances et la première a eu des effets secondaires sur ma présentation.

Quelle est la meilleure approche?

javascriptjqueryinternet-explorer-8
20
Doug

La solution que j'ai trouvée pour mon problème ie8 était d'ajouter/de supprimer une classe sur un parent proche de l'élément que je suis en train de changer. Depuis que j'utilise modernizer, je vérifie ie8, puis ajoute/supprime dance pour obtenir le nouveau fichier CSS à Paint.

        $uicontext.addClass('new-ui-look');
        if ($('html').is('.ie8')) {
            // IE8: ui does not repaint when css class changes
            $uicontext.parents('li').addClass('z').removeClass('z');
        }
24
Doug

La réponse correcte à cette question est que vous devez réellement changer la règle content.

.black-element:before { content:"Hey!"; color: #000;}
.red-element:before { content:"Hey! "; color: #f00;}

Notez l'espace supplémentaire que j'ai ajouté après Hey! sur .red-element

9
Adam

Ridiculement, cela fonctionne:

function ie8Repaint(element) {
    element.html(element.html().replace('>', '>'));
}

Rien ne change réellement dans le DOM, cela n'affectera donc aucun autre navigateur.

5
user489998

Déclenchez un événement de déplacement ou de redimensionnement.

var ie8 = whateverYouUseToDetectIE();
var element = document.getElementById("my-element");
element.className += " new-class";
if (ie8) {
    element.fireEvent("resize");
}
2
webaware

Cela développe les autres réponses ici. Vous devez à la fois ajouter une nouvelle classe ( La réponse de Doug ) et vous assurer que la classe a une valeur de contenu différente ( La réponse d'Adam ). Changer la classe à elle seule peut ne pas suffire. Le changement de contenu est nécessaire pour forcer IE8 à repeindre. Voici un article de blog connexe .

Voici le JQuery pour changer ajouter la nouvelle classe:

$(".my-css-class").addClass("my-css-class2");

Voici CSS avec la 2ème classe ayant une valeur de contenu légèrement différente:

.my-css-class:before {content: "\e014";}
.my-css-class2:before {content: "\e014 ";}
1
James Lawruk

J'ai eu beaucoup de difficulté et j'ai tout essayé en vain ... jusqu'à ce que j'essaye pour IE8

function toggleCheck(name) {
  el = document.getElementById(name);
  if( hasClass(el, 'checked') ) {
    el.className = el.className.replace(/checked/,'unchecked');
  } else if( hasClass(el, 'unchecked') ) {
    el.className = el.className.replace(/unchecked/,'checked');
  }
  document.body.className = document.body.className;
}
function hasClass(element, cls) {
  return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

Et maintenant, mes modifications CSS pour mes cases à cocher fonctionnent à merveille pour IE8, Chrome et Firefox!

0
Urchin