Comment forcer de manière fiable une refonte du DOM dans Chrome sur macOS ?

Forcer le redessinage du DOM sur Chrome/Mac : une solution aux problèmes de rendu

Dans certaines situations, Chrome sur Mac peut ne pas afficher correctement le HTML/CSS, malgré le balisage validité. Une solution courante consiste à modifier une propriété CSS et à récupérer le offsetHeight pour forcer un redessin. Cependant, cette méthode ne fonctionne plus efficacement sous Chrome/Mac.

Pour résoudre ce problème, une approche alternative qui fonctionne sur Chrome/Mac consiste à modifier temporairement la bordure de l'élément problématique :

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

Cela force l'élément à se repositionner, assurant un redessin. Cependant, un inconvénient est le retard impliqué, qui peut être visuellement gênant.

Une méthode encore plus fiable 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;
    element.appendChild(n);
    element.style.display = 'none';
    setTimeout(function(){
        element.style.display = disp;
        n.parentNode.removeChild(n);
    },20);
}

Cette technique garantit un redessinez sans avoir besoin d’un saut visuel. En modifiant la propriété d'affichage et en insérant un nœud de texte, cela déclenche la redistribution du DOM et l'affichage précis de l'élément.

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!