Comment forcer un redessin/actualisation du DOM dans Chrome pour Mac ?

Forcer le redessiner/actualiser le DOM dans Chrome pour Mac

Lorsque Chrome pour Mac rencontre du HTML/CSS valide, il restitue parfois les éléments de manière incorrecte ou pas du tout. Bien que l'inspection du DOM dans la console du navigateur déclenche généralement une refonte, une solution plus automatisée est souhaitable.

L'extrait JS suivant fonctionne efficacement dans la plupart des navigateurs et des systèmes d'exploitation :

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

Cependant, Chrome pour Mac contourne le redessin déclenché par offsetHeight. Une solution de contournement consiste à utiliser setTimeout pour modifier temporairement la bordure de l'élément, forçant un redessin :

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

Cette approche est lourde et visible. Une méthode plus efficace pour forcer un redessin sur Chrome pour Mac consiste à insérer un nœud de texte vide dans l'élément :

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
}

Cette approche garantit un redessin et est plus efficace que la méthode de bordure.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!