Forcer les DOM redessiner/actualisation sur Chrome/Mac

Question

Chaque fois que dans un certain temps, google Chrome rendre parfaitement valide en HTML/CSS mal ou pas du tout. Creuser par le biais de l'inspecteur DOM est souvent suffisant pour obtenir de se rendre compte de l'erreur de ses voies et de les redessiner correctement, il est donc prouvable le cas que le balisage est bon. Cela arrive fréquemment (et prévisible) assez dans un projet que je suis en train de travailler sur ce que j'ai mis le code en place de la force d'un retraçage dans certaines circonstances.

Cela fonctionne dans la plupart des navigateurs/os combinaisons:

    el.style.cssText += ';-webkit-transform:rotateZ(0deg)'
    el.offsetHeight
    el.style.cssText += ';-webkit-transform:none'

Comme dans, tweak inutilisée d'une propriété CSS, puis demander des informations que les forces d'un rafraîchissement, puis untweak la propriété. Malheureusement, le brillant de l'équipe, derrière google Chrome pour Mac semble avoir trouvé un moyen d'obtenir que offsetHeight sans redessiner. Ainsi, les tuant un par ailleurs utile hack.

Jusqu'à présent, le meilleur que j'ai trouvé pour obtenir le même effet sur Chrome/Mac est ce morceau de la laideur:

    $(el).css("border", "solid 1px transparent");
    setTimeout(function()
    {
        $(el).css("border", "solid 0px transparent");
    }, 1000);

Comme, en fait de la force de l'élément de sauter un peu, puis se détendre un deuxième et sauter en arrière. L'empirer, si vous supprimez la d'expiration de la mise en dessous de 500ms (à l'endroit où il serait moins visible), il est souvent de ne pas avoir l'effet désiré, car le navigateur ne va pas se déplacer à redessiner avant, il va revenir à son état d'origine.

Quiconque le soin d'offrir une meilleure version de ce redessiner/actualiser hack (de préférence basé sur le premier exemple ci-dessus) qui fonctionne sur Chrome/Mac?

Answer 1

Vous ne savez pas exactement ce que vous essayez d'atteindre, mais c'est une méthode que j'ai utilisé dans le passé, avec succès, pour forcer le navigateur à redessiner, peut-être qu'il va travailler pour vous.

// in jquery
$('#parentOfElementToBeRedrawn').hide().show(0);

// in plain js
document.getElementById('parentOfElementToBeRedrawn').style.display = 'none';
document.getElementById('parentOfElementToBeRedrawn').style.display = 'block';

Si ce simple redessiner ne fonctionne pas, vous pouvez essayer celui-ci. Il insère une zone de texte vide de nœud dans l'élément qui garantit un renouvellement.

var forceRedraw = function(element){

    if (!element) { return; }

    var n = document.createTextNode(' ');
    var disp = element.style.display;  // don't worry about previous display style

    element.appendChild(n);
    element.style.display = 'none';

    setTimeout(function(){
        element.style.display = disp;
        n.parentNode.removeChild(n);
    },20); // you can play with this timeout to make it as short as possible
}

EDIT: En réponse à Šime Vidas ce que nous accomplissons ici serait forcé de redistribution. Vous pouvez en savoir plus à partir de le maître lui-même http://paulirish.com/2011/dom-html5-css3-performance/

Answer 2

Aucune des réponses ci-dessus a fonctionné pour moi. J’ai remarqué que le redimensionnement de ma fenêtre a provoqué un nouveau dessin. Donc cela fait pour moi :

Answer 3

Cette solution sans délais d’attente ! Véritable force le rafraîchissement ! Pour Android et iOS.

Answer 4

Cela fonctionne pour moi. Bravo allez ici.

Answer 5

Cacher un élément et puis le montrer à nouveau dans un setTimeout 0 forcera un rafraîchissement.