Forza ridisegno / aggiornamento DOM su Chrome / Mac

Ogni tanto Chrome esegue il rendering di HTML / CSS perfettamente validi in modo errato o per niente. Scavare attraverso l'ispettore DOM è spesso sufficiente per renderlo consapevole dell'errore dei suoi modi e ridisegnare correttamente, quindi è dimostrabilmente il caso che il markup sia buono. Questo accade frequentemente (e prevedibilmente) abbastanza in un progetto a cui sto lavorando che ho messo il codice in atto per forzare un ridisegno in determinate circostanze.

Funziona nella maggior parte delle combinazioni browser / os:

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

Come in, modifica alcune proprietà CSS inutilizzate, quindi chiedi alcune informazioni che impongono un ridisegno, quindi annulla la proprietà. Sfortunatamente, il brillante team dietro Chrome per Mac sembra aver trovato un modo per ottenere quell'offsetHeight senza ridisegnare. Uccidendo così un trucco altrimenti utile.

Finora, il migliore che ho ideato per ottenere lo stesso effetto su Chrome / Mac è questo brutto aspetto:

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

Come in, forzare effettivamente l'elemento a saltare un po ', quindi raffreddare un secondo e saltarlo indietro. A peggiorare la situazione, se si abbassa quel timeout al di sotto di 500 ms (dove sarebbe meno evidente), spesso non avrà l'effetto desiderato, poiché il browser non tornerà al ridisegno prima di tornare allo stato originale.

Qualcuno vuole offrire una versione migliore di questo hack di ridisegno / aggiornamento (preferibilmente basato sul primo esempio sopra) che funziona su Chrome / Mac?

Non so esattamente cosa stai cercando di ottenere, ma questo è un metodo che ho usato in passato con successo per forzare il ridisegno del browser, forse funzionerà per te.

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

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

Se questo semplice ridisegno non funziona, puoi provare questo. Inserisce un nodo di testo vuoto nell'elemento che garantisce un ridisegno.

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: In risposta a Šime Vidas ciò che stiamo ottenendo qui sarebbe un riflusso forzato. Puoi saperne di più dal maestro stesso http://paulirish.com/2011/dom-html5-css3-performance/

Nessuna delle risposte sopra ha funzionato per me. Ho notato che il ridimensionamento della mia finestra ha causato un ridisegno. Quindi questo ha fatto per me:

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

Di recente abbiamo riscontrato questo e scoperto che la promozione dell'elemento interessato su un livello composito con translateZ ha risolto il problema senza bisogno di javascript extra.

.willnotrender { 
   transform: translateZ(0); 
}

Poiché questi problemi di pittura si manifestano principalmente in Webkit / Blink e questa correzione riguarda principalmente Webkit / Blink, in alcuni casi è preferibile. Soprattutto perché molte soluzioni JavaScript causano un riflusso e una riverniciatura , non solo una riverniciatura.

Questa soluzione senza timeout! Ridisegno della forza reale ! Per Android e iOS.

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

Questo funziona per me. Complimenti vai qui .

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

$(el).redraw();

Nascondere un elemento e poi mostrarlo di nuovo all'interno di un setTimeout di 0 forzerà un ridisegno.

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

Questo sembra fare il trucco per me. Inoltre, in realtà non mostra affatto.

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

la chiamata window.getComputedStyle()dovrebbe forzare un riflusso

Ho incontrato questa sfida oggi in OSX El Capitan con Chrome v51. La pagina in questione ha funzionato bene in Safari. Ho provato quasi tutti i suggerimenti in questa pagina - nessuno ha funzionato bene - tutti hanno avuto effetti collaterali ... Ho finito per implementare il codice qui sotto - super semplice - senza effetti collaterali (funziona ancora come prima in Safari).

Soluzione: attiva una classe sull'elemento problematico secondo necessità. Ogni comando forzerà un ridisegno. (Ho usato jQuery per comodità, ma JavaScript vaniglia non dovrebbe essere un problema ...)

Attiva / disattiva classe jQuery

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

Classe CSS

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

E questo è tutto ...

NOTA: per visualizzare l'effetto devi eseguire lo snippet sotto "Pagina intera".

$(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); 
}

chiama questa funzione dopo 500 millisecondi.

Se vuoi preservare gli stili dichiarati nei tuoi fogli di stile, è meglio usare qualcosa come:

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: con l'ultimo webkit / lampeggio, la memorizzazione del valore di offsetHeightè obbligatoria al fine di attivare la riverniciatura, altrimenti la VM (a fini di ottimizzazione) salterà probabilmente tale istruzione.

Aggiornamento: aggiunta la seconda offsetHeightlettura, è necessario impedire al browser di accodare / memorizzare nella cache una seguente modifica di proprietà / classe CSS con il ripristino del displayvalore (in questo modo dovrebbe essere visualizzata una transizione CSS che può seguire)

HTML di esempio:

<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

    };

funzione di chiamata:

$('article.child').redraw(); // <== cattiva idea

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

Un approccio che ha funzionato per me su IE (non potevo usare la tecnica di visualizzazione perché c'era un input che non doveva perdere la messa a fuoco)

Funziona se hai 0 margini (cambiando anche il padding funziona)

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

Solo CSS. Funziona in situazioni in cui un elemento figlio viene rimosso o aggiunto. In queste situazioni, i bordi e gli angoli arrotondati possono lasciare artefatti.

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

La mia correzione per IE10 + IE11. Fondamentalmente ciò che accade è che aggiungi un DIV all'interno di un elemento di avvolgimento che deve essere ricalcolato. Quindi rimuovilo e voilà; funziona come un fascino :)

    _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 maggior parte delle risposte richiede l'uso di un timeout asincrono, che provoca un fastidioso battito di ciglia.

Ma ho pensato a questo, che funziona senza intoppi perché è sincrono:

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

Questa è la mia soluzione che ha funzionato per la scomparsa dei contenuti ...

<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>

Ho riscontrato un problema simile e questa semplice linea di JS ha contribuito a risolverlo:

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

Nel mio caso si trattava di un bug con un'estensione di Chrome che non ridisegnava la pagina dopo aver cambiato il CSS dall'interno.

Volevo riportare tutti gli stati allo stato precedente (senza ricaricare) compresi gli elementi aggiunti da jquery. L'implementazione di cui sopra non funzionerà. e ho fatto come segue.

// 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()">

Avevo un elenco di componenti di reazione che, una volta fatto scorrere, apriva un'altra pagina, quindi quando tornava la lista non veniva visualizzata su Safari iOS fino a quando la pagina non veniva fatta scorrere. Quindi questa è la soluzione.

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

Di seguito css funziona per me su IE 11 e Edge, non è necessario JS. scaleY(1)fa il trucco qui. Sembra la soluzione più semplice.

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

Mi ha aiutato

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

2020: più leggero e più forte

Le soluzioni precedenti non funzionano più per me.

Immagino che i browser ottimizzino il processo di disegno rilevando sempre più cambiamenti "inutili".

Questa soluzione consente al browser di disegnare un clone per sostituire l'elemento originale. Funziona ed è probabilmente più sostenibile:

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

testato su Chrome 80 / Edge 80 / Firefox 75