Forcer le redessin / rafraîchissement DOM sur Chrome / Mac

De temps en temps, Chrome rendra HTML / CSS parfaitement valide incorrectement ou pas du tout. Il suffit souvent de creuser dans l'inspecteur DOM pour qu'il se rende compte de l'erreur de ses chemins et redessine correctement, il est donc prouvé que le balisage est bon. Cela se produit assez fréquemment (et de manière prévisible) dans un projet sur lequel je travaille et que j'ai mis en place du code pour forcer un redessin dans certaines circonstances.

Cela fonctionne dans la plupart des combinaisons navigateur / système d'exploitation:

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

Comme dans, ajustez une propriété CSS inutilisée, puis demandez des informations qui forcent un redessin, puis décochez la propriété. Malheureusement, l'équipe brillante derrière Chrome pour Mac semble avoir trouvé un moyen d'obtenir cet offsetHeight sans redessiner. Tuer ainsi un hack autrement utile.

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

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

Comme dans, forcez l'élément à sauter un peu, puis refroidissez-le une seconde et sautez-le en arrière. Pire encore, si vous ramenez ce délai en dessous de 500 ms (là où il serait moins visible), il n'aura souvent pas l'effet souhaité, car le navigateur ne se mettra pas à redessiner avant de revenir à son état d'origine.

Quelqu'un veut-il offrir une meilleure version de ce hack de rafraîchissement / rafraîchissement (basé de préférence sur le premier exemple ci-dessus) qui fonctionne sur Chrome / Mac?

Je ne sais pas exactement ce que vous essayez de réaliser, mais c'est une méthode que j'ai utilisée avec succès dans le passé pour forcer le navigateur à se redessiner, peut-être que cela fonctionnera 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 redessin ne fonctionne pas, vous pouvez essayer celui-ci. Il insère un nœud de texte vide dans l'élément, ce qui garantit un redessin.

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 réalisons ici serait une refusion forcée. Vous pouvez en savoir plus sur le maître lui-même http://paulirish.com/2011/dom-html5-css3-performance/

Aucune des réponses ci-dessus n'a fonctionné pour moi. J'ai remarqué que le redimensionnement de ma fenêtre a causé un redessin. Donc, ça l'a fait pour moi:

$(window).trigger('resize');

Nous avons récemment rencontré cela et découvert que la promotion de l'élément affecté en une couche composite avec translateZ corrigeait le problème sans avoir besoin de Javascript supplémentaire.

.willnotrender { 
   transform: translateZ(0); 
}

Comme ces problèmes de peinture apparaissent principalement dans Webkit / Blink, et que ce correctif cible principalement Webkit / Blink, il est préférable dans certains cas. D'autant plus que de nombreuses solutions JavaScript provoquent une refusion et une repeinture , pas seulement une repeinture.

Cette solution sans timeouts! Réel redessiner la force ! Pour Android et iOS.

var forceRedraw = function(element){
  var disp = element.style.display;
  element.style.display = 'none';
  var trick = element.offsetHeight;
  element.style.display = disp;
};

Cela fonctionne pour moi. Bravo, allez ici .

jQuery.fn.redraw = function() {
    return this.hide(0, function() {
        $(this).show();
    });
};

$(el).redraw();

Masquer un élément et l'afficher à nouveau dans un setTimeout de 0 forcera un nouveau tracé.

$('#page').hide();
setTimeout(function() {
    $('#page').show();
}, 0);

Cela semble faire l'affaire pour moi. De plus, cela ne se voit vraiment pas du tout.

$(el).css("opacity", .99);
setTimeout(function(){
   $(el).css("opacity", 1);
},20);

l'appel window.getComputedStyle()devrait forcer une refusion

J'ai rencontré ce défi aujourd'hui dans OSX El Capitan avec Chrome v51. La page en question a bien fonctionné dans Safari. J'ai essayé presque toutes les suggestions sur cette page - aucune ne fonctionnait correctement - toutes avaient des effets secondaires ... J'ai fini par implémenter le code ci-dessous - super simple - pas d'effets secondaires (fonctionne toujours comme auparavant dans Safari).

Solution: basculez une classe sur l'élément problématique selon vos besoins. Chaque bascule forcera un nouveau tracé. (J'ai utilisé jQuery pour plus de commodité, mais JavaScript vanille ne devrait pas poser de problème ...)

Basculement de classe jQuery

$('.slide.force').toggleClass('force-redraw');

Classe CSS

.force-redraw::before { content: "" }

Et c'est tout...

Remarque: vous devez exécuter l'extrait de code en dessous de «pleine page» afin de voir l'effet.

$(window).resize(function() {
  $('.slide.force').toggleClass('force-redraw');
});

.force-redraw::before {
  content: "";
}
html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.slide-container {
  width: 100%;
  height: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  padding-left: 10%;
  padding-right: 5%;
}
.slide {
  position: relative;
  display: inline-block;
  height: 30%;
  border: 1px solid green;
}
.slide-sizer {
  height: 160%;
  pointer-events: none;
  //border: 1px solid red;

}
.slide-contents {
  position: absolute;
  top: 10%;
  left: 10%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
  This sample code is a simple style-based solution to maintain aspect ratio of an element based on a dynamic height.  As you increase and decrease the window height, the elements should follow and the width should follow in turn to maintain the aspect ratio.  You will notice that in Chrome on OSX (at least), the "Not Forced" element does not maintain a proper ratio.
</p>
<div class="slide-container">
  <div class="slide">
    <img class="slide-sizer" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
    <div class="slide-contents">
      Not Forced
    </div>
  </div>
  <div class="slide force">
    <img class="slide-sizer" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
    <div class="slide-contents">
      Forced
    </div>
  </div>
</div>

function resizeWindow(){
    var evt = document.createEvent('UIEvents');
    evt.initUIEvent('resize', true, false,window,0);
    window.dispatchEvent(evt); 
}

appeler cette fonction après 500 millisecondes.

Si vous souhaitez conserver les styles déclarés dans vos feuilles de style, mieux vaut utiliser quelque chose comme:

jQuery.fn.redraw = function() {
    this.css('display', 'none'); 
    var temp = this[0].offsetHeight;
    this.css('display', '');
    temp = this[0].offsetHeight;
};

$('.layer-to-repaint').redraw();

NB: avec le dernier webkit / blink, le stockage de la valeur de offsetHeightest obligatoire afin de déclencher le repeindre, sinon la VM (à des fins d'optimisation) sautera probablement cette instruction.

Mise à jour: ajout de la deuxième offsetHeightlecture, il est nécessaire d'empêcher le navigateur de mettre en file d'attente / de mettre en cache un changement de propriété / classe CSS suivant avec la restauration de la displayvaleur (de cette façon, une transition CSS qui peut suivre doit être rendue)

Exemple de code HTML:

<section id="parent">
  <article class="child"></article>
  <article class="child"></article>
</section>

Js:

  jQuery.fn.redraw = function() {
        return this.hide(0,function() {$(this).show(100);});
        // hide immediately and show with 100ms duration

    };

fonction d'appel:

$('article.child').redraw(); // <== mauvaise idée

$('#parent').redraw();

Une approche qui a fonctionné pour moi sur IE (je ne pouvais pas utiliser la technique d'affichage car il y avait une entrée qui ne devait pas perdre le focus)

Cela fonctionne si vous avez 0 marge (la modification du rembourrage fonctionne également)

if(div.style.marginLeft == '0px'){
    div.style.marginLeft = '';
    div.style.marginRight = '0px';
} else {
    div.style.marginLeft = '0px';
    div.style.marginRight = '';
}

CSS uniquement. Cela fonctionne pour les situations où un élément enfant est supprimé ou ajouté. Dans ces situations, les bordures et les coins arrondis peuvent laisser des artefacts.

el:after { content: " "; }
el:before { content: " "; }

Ma solution pour IE10 + IE11. Fondamentalement, ce qui se passe est que vous ajoutez un DIV dans un élément enveloppant qui doit être recalculé. Il suffit ensuite de le retirer et le tour est joué; fonctionne comme un charme :)

    _initForceBrowserRepaint: function() {
        $('#wrapper').append('<div style="width=100%" id="dummydiv"></div>');
        $('#dummydiv').width(function() { return $(this).width() - 1; }).width(function() { return $(this).width() + 1; });
        $('#dummydiv').remove();
    },

La plupart des réponses nécessitent l'utilisation d'un délai d'attente asynchrone, ce qui provoque un clignotement gênant.

Mais je suis venu avec celui-ci, qui fonctionne bien car il est synchrone:

var p = el.parentNode,
    s = el.nextSibling;
p.removeChild(el);
p.insertBefore(el, s);

C'est ma solution qui a fonctionné pour la disparition de contenu ...

<script type = 'text/javascript'>
    var trash_div;

    setInterval(function()
    {
        if (document.body)
        {
            if (!trash_div)
                trash_div = document.createElement('div');

            document.body.appendChild(trash_div);
            document.body.removeChild(trash_div);
        }
    }, 1000 / 25); //25 fps...
</script>

J'ai rencontré un problème similaire et cette simple ligne de JS a aidé à le résoudre:

document.getElementsByTagName('body')[0].focus();

Dans mon cas, il s'agissait d'un bug avec une extension Chrome ne redessinant pas la page après avoir changé son CSS depuis l'extension.

Je voulais ramener tous les états à l'état précédent (sans rechargement) y compris les éléments ajoutés par jquery. L'implémentation ci-dessus ne fonctionnera pas. et j'ai fait comme suit.

// Set initial HTML description
var defaultHTML;
function DefaultSave() {
  defaultHTML = document.body.innerHTML;
}
// Restore HTML description to initial state
function HTMLRestore() {
  document.body.innerHTML = defaultHTML;
}



DefaultSave()
<input type="button" value="Restore" onclick="HTMLRestore()">

J'avais une liste de composants React qui, lorsqu'elle était défilée, avait ouvert une autre page, puis lors du retour, la liste n'était pas rendue sur Safari iOS jusqu'à ce que la page défile. C'est donc le correctif.

    componentDidMount() {
        setTimeout(() => {
            window.scrollBy(0, 0);
        }, 300);
    }

Ci-dessous, css fonctionne pour moi sur IE 11 et Edge, aucun JS n'est nécessaire. scaleY(1)fait l'affaire ici. Semble la solution la plus simple.

.box {
    max-height: 360px;
    transition: all 0.3s ease-out;
    transform: scaleY(1);
}
.box.collapse {
    max-height: 0;
}

Ça m'a aidé

domNodeToRerender.style.opacity = 0.99;
setTimeout(() => { domNodeToRerender.style.opacity = '' }, 0);

2020: plus léger et plus fort

Les solutions précédentes ne fonctionnent plus pour moi.

Je suppose que les navigateurs optimisent le processus de dessin en détectant de plus en plus de changements "inutiles".

Cette solution fait que le navigateur dessine un clone pour remplacer l'élément d'origine. Cela fonctionne et est probablement plus durable:

const element = document.querySelector('selector');
if (element ) {
  const clone = element.cloneNode(true);
  element.replaceWith(clone);
}

testé sur Chrome 80 / Edge 80 / Firefox 75