Come posso forzare WebKit a ridisegnare / ridipingere per propagare i cambiamenti di stile?

247

Ho qualche banale JavaScript per effettuare un cambio di stile:

sel = document.getElementById('my_id');
sel.className = sel.className.replace(/item-[1-9]-selected/,'item-1-selected');
return false;

Funziona bene con le ultime versioni di FF, Opera e IE, ma fallisce con le ultime versioni di Chrome e Safari.

Colpisce due discendenti, che sono fratelli. Il primo fratello si aggiorna, ma il secondo no. Anche un figlio del secondo elemento ha lo stato attivo e contiene il tag <a> che contiene il codice sopra in un attributo onclick .

Nella finestra di Chrome "Strumenti per gli sviluppatori" se spingo (ad esempio deselezionando e spuntando) qualsiasi attributo di qualsiasi elemento, il secondo fratello si aggiorna allo stile corretto.

Esiste una soluzione alternativa per "spingere" WebKit facilmente e programmaticamente a fare la cosa giusta?

— danorton
fonte

Penso di riscontrare questo problema su Android 4.2.2 (Samsung I9500) durante il wrapping della mia app canvas in un WebView. Ridicolo!

— Josh,

3

what-forces-layout.md un ottimo posto per la lettura

— vsync

312

Ho trovato alcuni suggerimenti complicati e molti semplici che non hanno funzionato, ma un commento a uno di essi di Vasil Dinkov ha fornito una soluzione semplice per forzare un ridisegno / riverniciatura che funziona perfettamente:

sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='';

Lascerò qualcun altro commentare se funziona per stili diversi da "blocco".

Grazie Vasil!

— danorton
fonte

32

Per evitare lo sfarfallio potresti provare 'inline-block', 'table'o 'run-in'invece di 'none', ma questo potrebbe avere effetti collaterali. Inoltre, un timeout di 0 attiva un riflusso proprio come offsetHeightfa la query :sel.style.display = 'run-in'; setTimeout(function () { sel.style.display = 'block'; }, 0);

— user123444555621

15

Questa risposta è ancora utile 2 anni dopo. L'ho usato solo per risolvere un problema solo di Chrome in cui le ombre dei riquadri CSS sono rimaste sullo schermo dopo aver ridimensionato il browser in alcuni modi. Grazie!

— rkulla,

5

@danorton Hai risposto nel 2010. È il 2013 e il bug è ancora in circolazione. Grazie. A proposito, qualcuno sa se c'è qualche problema registrato sul webkit tracker?

— RaphaelDDL

13

PS .: per me la soluzione sopra non ha funzionato più. Invece ho usato questo (jQuery): sel.hide (). Show (0); Fonte: stackoverflow.com/questions/8840580/…

— ProblemsOfSumit

7

Tutto quello che devi fare è leggere una proprietà size, non è necessario cambiarla avanti e indietro.

— Andrew Bullock,

93

Di recente abbiamo riscontrato questo problema e scoperto che la promozione dell'elemento interessato su un livello composito con translateZ in CSS ha risolto il problema senza che fosse necessario JavaScript aggiuntivo.

.willnotrender { 
   transform: translateZ(0); 
}

Poiché questi problemi di pittura si presentano principalmente in Webkit / Blink e questa correzione riguarda principalmente Webkit / Blink, in alcuni casi è preferibile. Soprattutto dal momento che la risposta accettata quasi sicuramente causa un riflusso e ridipingere , no solo una riverniciatura.

Webkit e Blink hanno lavorato duramente per le prestazioni di rendering e questi tipi di problemi tecnici sono lo sfortunato effetto collaterale delle ottimizzazioni che mirano a ridurre flussi e vernici non necessari. CSS cambierà o un'altra specifica successiva sarà la soluzione futura, molto probabilmente.

Esistono altri modi per ottenere uno strato composito, ma questo è il più comune.

— morewry
fonte

1

Ha funzionato per me usando la giostra angolare !

— gustavohenke,

1

Risolto il problema per cui il raggio del bordo si perdeva in un elemento all'interno di un pannello scorrevole

— Timo,

1

Funziona anche per progetti Cordova!

— Quispie,

1

Ha funzionato per me per un -webkit-line-clamp che non si aggiornava

— Adam Marshall

1

Ha funzionato per me su ipad (6.0) con -webkit-transform: translate (-50%, -50%).

— Lain,

51

la soluzione Danorton non ha funzionato per me. Ho avuto dei problemi davvero strani in cui webkit non ha disegnato alcun elemento; dove il testo negli input non è stato aggiornato fino a onblur; e la modifica di className non comporterebbe un ridisegno.

La mia soluzione, ho scoperto per caso, era quella di aggiungere un elemento di stile vuoto al corpo, dopo la sceneggiatura.

<body>
...
<script>doSomethingThatWebkitWillMessUp();</script>
<style></style>
...

Ciò l'ha risolto. Quanto è strano? Spero che questo sia utile per qualcuno.

— Gerben
fonte

3

Voterei 1.000.000 di volte se potessi. Questo è l'unico modo in cui ho potuto ottenere Chrome per ridipingere uno stupido div che stavo trascinando in giro. A proposito, non è necessario aggiungere un elemento di stile (almeno non l'ho fatto) qualsiasi elemento funzionerà. Ho fatto un div e gli ho dato un id in modo da poterlo eliminare, quindi aggiungere l'elemento ad ogni passaggio, in modo da non riempire il DOM con tag inutili.

— hobberwickey,

6

ho appena usato questo mixato con il commento di Pumbaa80 su un'altra risposta. La correzione con cui ho finito è statavar div = $('<div>').appendTo(element); setTimeout(function(){ div.remove(); }, 0);

— bendman,

33

Questa linea singola funziona alla grande per me! $('<style></style>').appendTo($(document.body)).remove();

— pdelanauze,

1

La risposta di @pdelanauze funziona perfettamente. Ho un problema di ridisegno cantare css3 tradurre e trasformare in iOS.

— Marcel Falliere,

11

Sappi solo che questo costringe a ridipingere l'intera pagina, mentre la maggior parte delle volte vuoi solo ridipingere una certa sezione della pagina ...

— Ryan Wheale

33

Poiché il trigger display + offset non ha funzionato per me, ho trovato una soluzione qui:

http://mir.aculo.us/2009/09/25/force-redraw-dom-technique-for-webkit-based-browsers/

vale a dire

element.style.webkitTransform = 'scale(1)';

— EricG
fonte

3

L'ho usato in un trucco che stavo provando, ma invece di scale(1)assegnarlo a se stesso come element.style.webkitTransform = element.style.webkitTransform. Il motivo di questo è che impostarlo sul primo stava distorcendo leggermente la pagina per absoluteelementi posizionati!

— bPratik,

Questo ha funzionato per me e non ha avuto problemi a sfarfallare o ripristinare la posizione di scorrimento della displaysoluzione.

— davidtbernal,

Avevo un'app Cordova che utilizzava un sacco di SVG dinamico. Funzionava bene ovunque tranne iOS7, dove se non fosse possibile visualizzare gli elementi SVG all'avvio. Aggiunto un semplice $ ('body') [0] .style.webkitTransform = 'scale (1)'; al codice di inizializzazione e il problema è scomparso!

— Herc,

Questo non funziona in questo momento, sul nuovissimo Safari e iOS.

— setholopolus,

@setholopolus quale verso (s) sarebbe?

— EricG,

23

Stavo soffrendo lo stesso problema. La correzione 'toggling display' di danorton ha funzionato per me quando è stata aggiunta alla funzione step della mia animazione ma ero preoccupato per le prestazioni e ho cercato altre opzioni.

Nella mia circostanza, l'elemento che non stava ridipingendo si trovava all'interno di un elemento di posizione assolutamente che all'epoca non aveva un indice z. L'aggiunta di un indice z a questo elemento ha cambiato il comportamento di Chrome e la ridistribuzione è avvenuta come previsto -> le animazioni sono diventate fluide.

Dubito che questa sia una panacea, immagino che dipenda dal perché Chrome ha scelto di non ridisegnare l'elemento ma sto pubblicando questa soluzione specifica qui nell'aiuto che spera che qualcuno.

Saluti, Rob

tl; dr >> Prova ad aggiungere un indice z all'elemento o un suo genitore.

— Rob Murphy
fonte

8

Brillante. Questo è fantastico e ha risolto il problema per me. A +++ z-index di nuovo.

— trisweb,

Non ha funzionato nella mia situazione con le barre di scorrimento e le trasformazioni.

— Ricky Boyce,

16

I seguenti lavori. Deve essere impostato solo una volta in puro CSS. E funziona in modo più affidabile di una funzione JS. Le prestazioni sembrano inalterate.

@-webkit-keyframes androidBugfix {from { padding: 0; } to { padding: 0; }}
body { -webkit-animation: androidBugfix infinite 1s; }

— sweeds
fonte

Sembra che funzioni anche per me. Usato per risolvere un problema di rendering con Mobile Safari

— Chris

Questo risolve il mio problema, costringe Safari a inoltro. Tuttavia, ho usatozoom posto dell'imbottitura:@-webkit-keyframes safariBugFix {from { zoom: 100%; } to { zoom: 99.99999%; }}

— Ahmed Musallam il

13

Per qualche motivo non sono riuscito a ottenere la risposta di Danorton al lavoro, ho potuto vedere cosa avrebbe dovuto fare, quindi l'ho modificato un po 'a questo:

$('#foo').css('display', 'none').height();
$('#foo').css('display', 'block');

e ha funzionato per me.

— sowasred2012
fonte

7

Ho provato tutto sopra, ma solo questo ha funzionato per me. WTF webkit! Questa non è informatica! Questa è magia nera!

— Charlie Martin,

7

Sono venuto qui perché avevo bisogno di ridisegnare le barre di scorrimento in Chrome dopo aver cambiato il suo CSS.

Se qualcuno ha lo stesso problema, l'ho risolto chiamando questa funzione:

//Hack to force scroll redraw
function scrollReDraw() {
    $('body').css('overflow', 'hidden').height();
    $('body').css('overflow', 'auto');
}

Questo metodo non è la soluzione migliore, ma può funzionare con qualsiasi cosa, nascondendo e mostrando l'elemento che deve essere ridisegnato può risolvere ogni problema.

Ecco il violino dove l'ho usato: http://jsfiddle.net/promatik/wZwJz/18/

— António Almeida
fonte

1

Grande! Stavo cercando di animare anche le barre di scorrimento ed è quello di cui avevo bisogno! Btw uso migliore overflow: overlay per barre di scorrimento animate

— ekalchev

6

Mi sono imbattuto in questo oggi: Element.redraw () per prototype.js

usando:

Element.addMethods({
  redraw: function(element){
    element = $(element);
    var n = document.createTextNode(' ');
    element.appendChild(n);
    (function(){n.parentNode.removeChild(n)}).defer();
    return element;
  }
});

Tuttavia, a volte ho notato che è necessario chiamare direttamente redraw () sull'elemento problematico. A volte ridisegnare l'elemento genitore non risolve il problema riscontrato dal bambino.

Buon articolo sul modo in cui i browser visualizzano gli elementi: Rendering: ridipingere, reflow / relayout, restyle

— Adam Eberlin
fonte

1

appendChildè un metodo DOM, non un metodo jQuery.

— ChrisW,

4

Ho avuto questo problema con un numero di div che sono stati inseriti in un altro div con position: absolute, i div inseriti non avevano alcun attributo di posizione. Quando l'ho cambiato position:relativeha funzionato bene. (è stato davvero difficile individuare il problema)

Nel mio caso gli elementi sono stati inseriti da Angular con ng-repeat.

— JustGoscha
fonte

1

Grazie! Questo ha funzionato anche per il mio problema, ed è molto più leggero rispetto a molte delle soluzioni javascript sopra.

— Dsyko,

4

Non riesco a credere che questo sia ancora un problema nel 2014. Ho appena avuto questo problema durante l'aggiornamento di una casella di didascalia a posizione fissa nella parte in basso a sinistra della pagina durante lo scorrimento, la didascalia si "spandeva" sullo schermo. Dopo aver provato tutto sopra senza successo, ho notato che molte cose erano lente o causavano problemi a causa della creazione di inoltri DOM molto brevi, ecc. Che causavano una sensazione di scorrimento innaturale, ecc ...

Ho finito per fare una posizione fissa, div a grandezza naturale con pointer-events: none e applicare la risposta di Danorton a quell'elemento, che sembra forzare un ridisegno su tutto lo schermo senza interferire con il DOM.

HTML:

<div id="redraw-fix"></div>

CSS:

div#redraw-fix {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 25;
    pointer-events: none;
    display: block;
}

JS:

sel = document.getElementById('redraw-fix');
sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='block';

— waffl
fonte

Non posso ringraziarti abbastanza per la tua soluzione alternativa che è l'unica che ha funzionato per me. Sì, è il 2017 e il problema persiste. Il mio problema era legato a una pagina della lingua RTL che sarebbe stata resa vuota se aggiornata manualmente sui dispositivi mobili Android. Le regole z-indexe pointer-eventssono superflue qui.

— Amin Mozafari,

Ho usato la correzione di Danorton prima, ma ero davvero alle prese con il flash di contenuti dall'impostazione di display a nessuno. La tua soluzione ha funzionato alla grande per me senza contenuti flash!

— Justin Noel,

3

Non che questa domanda abbia bisogno di un'altra risposta, ma ho scoperto che cambiare semplicemente il colore con un singolo bit ha costretto a ridipingere la mia situazione particolare.

//Assuming black is the starting color, we tweak it by a single bit
elem.style.color = '#000001';

//Change back to black
setTimeout(function() {
    elem.style.color = '#000000';
}, 0);

Il setTimeoutdimostrato critico per spostare il secondo cambiamento stile all'esterno del ciclo evento corrente.

— Tmaň
fonte

1

L'impostazione di un timeout di 0 si è rivelata utile per me in una situazione diversa ma simile. Il redraw non si stava verificando prima che la convalida discreta di jquery congelasse lo schermo mentre analizzava una grande forma. Ho pensato di commentare nel caso in cui qualcuno fosse nella stessa situazione. Le altre soluzioni non hanno funzionato in questo scenario.

— k29,

2

L'unica soluzione che funziona per me è simile alla risposta di sowasred2012:

$('body').css('display', 'table').height();
$('body').css('display', 'block');

Ho molti blocchi di problemi sulla pagina, quindi cambio displayproprietà dell'elemento root. E io uso display: table;invece di display: none;, perché noneripristinerà l'offset di scorrimento.

— Ilya Sviridenko
fonte

2

Io uso il transform: translateZ(0); metodo ma in alcuni casi non è sufficiente.

Non sono fan dell'aggiunta e della rimozione di una classe, quindi ho cercato di trovare il modo di risolverlo e ho finito con un nuovo hack che funziona bene:

@keyframes redraw{
    0% {opacity: 1;}
    100% {opacity: .99;}
}

// ios redraw fix
animation: redraw 1s linear infinite;

— Guillaume Gautier
fonte

1

Dal momento che tutti sembrano avere i propri problemi e soluzioni, ho pensato di aggiungere qualcosa che funzioni per me. Su Android 4.1 con Chrome corrente, provando a trascinare una tela all'interno di un div con overflow: nascosto, non potrei ottenere un ridisegno a meno che non aggiungessi un elemento al div genitore (dove non farebbe alcun danno).

var parelt = document.getElementById("parentid");
var remElt = document.getElementById("removeMe");
var addElt = document.createElement("div");
addElt.innerHTML = " "; // Won't work if empty
addElt.id="removeMe";
if (remElt) {
    parelt.replaceChild(addElt, remElt);
} else {
    parelt.appendChild(addElt);
}

Nessun sfarfallio dello schermo o aggiornamento reale e pulizia dopo me stesso. Nessuna variabile con ambito globale o di classe, solo locali. Non sembra danneggiare nulla su Safari Mobile / iPad o browser desktop.

— Eric Ruck
fonte

1

Sto lavorando all'app ionica html5, su alcuni schermi che ho absolute posizionato l'elemento, quando scorrevo su o giù nei dispositivi IOS (iPhone 4,5,6, 6+) avevo un bug di ridipingere.

Ho provato molte soluzioni, nessuna delle quali funzionava, tranne questa, per risolvere il mio problema.

Ho usato la classe CSS .fixRepaintsu quegli elementi di posizioni assolute

.fixRepaint{
    transform: translateZ(0);
}

Questo ha risolto il mio problema, potrebbe essere d'aiuto qualcuno

— Anjum ....
fonte

1

Ops come non l'ho visto. @morewry Grazie per aver sottolineato

— Anjum ....

0

Questo va bene per JS

sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='block';

Ma in Jquery, e in particolare quando puoi usare solo $ (documento). Già e non puoi associarti a un evento .load di un oggetto per qualsiasi motivo particolare, funzionerà quanto segue.

È necessario ottenere il contenitore OUTER (MOST) degli oggetti / div e quindi rimuovere tutto il suo contenuto in una variabile, quindi aggiungerlo nuovamente. Renderà visibili TUTTE le modifiche apportate all'interno del contenitore esterno.

$(document).ready(function(){
    applyStyling(object);
    var node = $("div#body div.centerContainer form div.centerHorizontal").parent().parent();
    var content = node.html();
    node.html("");
    node.html(content);
}

— WiR3D
fonte

0

Ho trovato questo metodo utile quando si lavora con le transizioni

$element[0].style.display = 'table'; 
$element[0].offsetWidth; // force reflow
$element.one($.support.transition.end, function () { 
    $element[0].style.display = 'block'; 
});

— Jschr
fonte

0

l'hack "display / offsetHeight" non ha funzionato nel mio caso, almeno quando è stato applicato all'elemento animato.

avevo un menu a discesa aperto / chiuso sul contenuto della pagina. i manufatti venivano lasciati sul contenuto della pagina dopo la chiusura del menu (solo nei browser webkit). l'unico modo in cui ha funzionato l'hack "display / offsetHeight" è se l'ho applicato al corpo, che sembra brutto.

tuttavia, ho trovato un'altra soluzione:

prima che l'elemento inizi l'animazione, aggiungi una classe che definisce "-webkit-backface-visible: hidden;" sull'elemento (potresti anche usare lo stile inline, immagino)
al termine dell'animazione, rimuovi la classe (o lo stile)

questo è ancora piuttosto confuso (usa una proprietà CSS3 per forzare il rendering hardware), ma almeno influenza solo l'elemento in questione, e ha funzionato per me sia su Safari che su Chrome su PC e Mac.

— tedtedson
fonte

0

Questo sembra correlato a questo: lo stile jQuery non viene applicato in Safari

La soluzione suggerita nella prima risposta ha funzionato bene per me in questi scenari, vale a dire: applicare e rimuovere una classe fittizia sul corpo dopo aver apportato le modifiche di stile:

$('body').addClass('dummyclass').removeClass('dummyclass');

Questo costringe il safari a ridisegnare.

— steve
fonte

Per farlo funzionare in Chrome ho dovuto aggiungere: $ ('body'). AddClass ('dummyclass'). Delay (0) .removeClass ('dummyclass');

— mbokil,

0

i suggerimenti sopra non hanno funzionato per me. ma quello sotto lo fa.

Vuoi cambiare dinamicamente il testo all'interno dell'ancora. La parola "Cerca". Creato un tag interno "font" con un attributo id. Gestito i contenuti usando javascript (sotto)

Ricerca

contenuto della sceneggiatura:

    var searchText = "Search";
    var editSearchText = "Edit Search";
    var currentSearchText = searchText;

    function doSearch() {
        if (currentSearchText == searchText) {
            $('#pSearch').panel('close');
            currentSearchText = editSearchText;
        } else if (currentSearchText == editSearchText) {
            $('#pSearch').panel('open');
            currentSearchText = searchText;
        }
        $('#searchtxt').text(currentSearchText);
    }

— ganesh
fonte

0

Stavo riscontrando un problema con un SVG che stava scomparendo su Chrome per Android quando l'orientamento è stato modificato in determinate circostanze. Il codice seguente non lo riproduce, ma è l'impostazione che avevamo.

body {
  font-family: tahoma, sans-serif;
  font-size: 12px;
  margin: 10px;
}
article {
  display: flex;
}
aside {
  flex: 0 1 10px;
  margin-right: 10px;
  min-width: 10px;
  position: relative;
}
svg {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.backgroundStop1 {
  stop-color: #5bb79e;
}
.backgroundStop2 {
  stop-color: #ddcb3f;
}
.backgroundStop3 {
  stop-color: #cf6b19;
}

<article>
  <aside>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%">
      <defs>
        <linearGradient id="IndicatorColourPattern" x1="0" x2="0" y1="0" y2="1">
          <stop class="backgroundStop1" offset="0%"></stop>
          <stop class="backgroundStop2" offset="50%"></stop>
          <stop class="backgroundStop3" offset="100%"></stop>
        </linearGradient>
      </defs>
      <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" fill="url(#IndicatorColourPattern)"></rect>
    </svg>
  </aside>
  <section>
    <p>Donec et eros nibh. Nullam porta, elit ut sagittis pulvinar, lacus augue lobortis mauris, sed sollicitudin elit orci non massa. Proin condimentum in nibh sed vestibulum. Donec accumsan fringilla est, porttitor vestibulum dolor ornare id. Sed elementum
      urna sollicitudin commodo ultricies. Curabitur tristique orci et ligula interdum, eu condimentum metus eleifend. Nam libero augue, pharetra at maximus in, pellentesque imperdiet orci.</p>
    <p>Fusce commodo ullamcorper ullamcorper. Etiam eget pellentesque quam, id sodales erat. Vestibulum risus magna, efficitur sed nisl et, rutrum consectetur odio. Sed at lorem non ligula consequat tempus vel nec risus.</p>
  </section>
</article>

Espandi frammento

Giorno e mezzo dopo, dopo aver frugato e pungolato e non contento delle soluzioni confuse offerte qui, ho scoperto che il problema era causato dal fatto che sembrava mantenere l'elemento in memoria mentre ne disegnava uno nuovo. La soluzione era quella di rendere unico l'ID del linearGradient su SVG, anche se è stato usato una sola volta per pagina.

Questo può essere ottenuto in molti modi diversi, ma per la nostra app angolare abbiamo usato la funzione lodash uniqueId per aggiungere una variabile all'ambito:

Direttiva angolare (JS):

scope.indicatorColourPatternId = _.uniqueId('IndicatorColourPattern');

Aggiornamenti HTML:

Linea 5: <linearGradient ng-attr-id="{{indicatorColourPatternId}}" x1="0" x2="0" y1="0" y2="1">

Linea 11: <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" ng-attr-fill="url(#{{indicatorColourPatternId}})"/>

Spero che questa risposta salvi a qualcun altro la pena di distruggere il viso con la tastiera.

— Jamie Barker
fonte

0

Consiglierei un modo meno informale e più formale per forzare un riflusso: usare forceDOMReflowJS . Nel tuo caso, il tuo codice sarebbe simile al seguente.

sel = document.getElementById('my_id');
forceReflowJS( sel );
return false;

— Jack Giffin
fonte

0

Ho scoperto che l'aggiunta di uno stile di contenuto all'elemento lo ha costretto a ridipingere, questo dovrebbe avere un valore diverso ogni volta che vuoi ridisegnarlo e non è necessario che si trovi su uno pseudo elemento.

.selector {
    content: '1'
}

— Steve
fonte

0

Ho provato a rispondere di più, ma non funziona per me. Ho avuto problemi ad avere lo stesso clientWidth con Safari rispetto ad altri browser e questo codice ha risolto il problema:

var get_safe_value = function(elm,callback){
    var sty = elm.style
    sty.transform = "translateZ(1px)";
    var ret = callback(elm)//you can get here the value you want
    sty.transform = "";
    return ret
}
// for safari to have the good clientWidth
var $fBody = document.body //the element you need to fix
var clientW = get_safe_value($fBody,function(elm){return $fBody.clientWidth})

È davvero strano perché se provo di nuovo a ottenere il clientWidth dopo get_safe_value, ottengo un valore negativo con Safari, il getter deve essere compreso tra sty.transform = "translateZ(1px)"; esty.transform = "";

L'altra soluzione che funziona definitivamente è

var $fBody = document.body //the element you need to fix
$fBody.style.display = 'none';
var temp = $.body.offsetHeight;
$fBody.style.display = ""
temp = $.body.offsetHeight;

var clientW = $fBody.clientWidth

Il problema è che perdi gli stati di messa a fuoco e scorrimento.

— bormat
fonte

0

Ciò forzerà la riverniciatura evitando sfarfallio, armeggiamento di elementi esistenti e qualsiasi problema di layout ...

function forceRepaint() {
    requestAnimationFrame(()=>{
      const e=document.createElement('DIV');
      e.style='position:fixed;top:0;left:0;bottom:0;right:0;background:#80808001;\
               pointer-events:none;z-index:9999999';
      document.body.appendChild(e);
      requestAnimationFrame(()=>e.remove());  
    });
}

— user2026189
fonte

-1

Una soluzione semplice con jquery:

$el.html($el.html());

o

element.innerHTML = element.innerHTML;

Aveva un SVG che non veniva mostrato quando è stato aggiunto all'html.

Questo può essere aggiunto dopo che gli elementi svg sono sullo schermo.

La soluzione migliore è usare:

document.createElementNS('http://www.w3.org/2000/svg', 'svg');

e con jQuery:

$(svgDiv).append($(document.createElementNS('http://www.w3.org/2000/svg', 'g'));

questo verrà visualizzato correttamente su Chrome.

— Yaron Shamir
fonte

Il problema con questo approccio è che perdi tutti i gestori di eventi che hai registrato sull'oggetto o sui suoi discendenti.

— Haqa,