Comment forcer un redessinage du DOM dans Chrome pour Mac ?

Comment forcer une refonte du DOM sur Chrome pour Mac

En développement Web, il est parfois nécessaire de forcer le navigateur à redessiner ou actualiser le DOM (Modèle Objet de Document). Bien qu'il existe différentes approches qui fonctionnent dans la plupart des navigateurs, Chrome pour Mac pose un défi unique.

La technique standard consistant à modifier une propriété CSS inutilisée, à rechercher une dimension d'élément, puis à annuler la modification ne fonctionne plus sur Chrome pour Mac. Ce comportement est dû à des optimisations qui empêchent de redessiner lorsque la propriété offsetHeight est récupérée.

Pour pallier cette limitation, on peut recourir à une méthode plus invasive :

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

Bien que cette méthode assure un redessiner, cela provoque également un saut visible dans la position de l'élément, ce qui peut être indésirable. Une approche plus subtile qui garantit un redessin est :

$('#parentOfElementToBeRedrawn').hide().show(0);

Cela masque puis affiche immédiatement l'élément parent, forçant une redistribution. Alternativement, en JavaScript simple :

document.getElementById('parentOfElementToBeRedrawn').style.display = 'none';
document.getElementById('parentOfElementToBeRedrawn').style.display = 'block';

Pour un contrôle plus précis du timing de rafraîchissement, une fonction personnalisée peut être définie :

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
}

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!