Forçar redesenho / atualização do DOM no Chrome / Mac

De vez em quando, o Chrome processa HTML / CSS perfeitamente válidos incorretamente ou nada. Muitas vezes, pesquisar no inspetor DOM é suficiente para que ele perceba o erro de suas formas e redesenha-o corretamente; portanto, é provável que a marcação seja boa. Isso acontece com frequência (e previsivelmente) o suficiente em um projeto no qual estou trabalhando, e coloquei o código para forçar um redesenho em determinadas circunstâncias.

Isso funciona na maioria das combinações de navegadores / sistemas operacionais:

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

Como em, ajuste algumas propriedades CSS não utilizadas, solicite algumas informações que forçam um redesenho e, em seguida, desative a propriedade. Infelizmente, a brilhante equipe por trás do Chrome para Mac parece ter encontrado uma maneira de obter esse deslocamento de altura sem redesenhar. Assim, matando um hack útil.

Até agora, o melhor que consegui para obter o mesmo efeito no Chrome / Mac é essa parte feia:

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

Na verdade, force o elemento a pular um pouco, depois relaxe um segundo e pule de volta. Para piorar, se você diminuir o tempo limite abaixo de 500ms (para onde seria menos perceptível), geralmente não terá o efeito desejado, pois o navegador não será redesenhado antes de voltar ao seu estado original.

Alguém gostaria de oferecer uma versão melhor desse hack de redesenho / atualização (de preferência com base no primeiro exemplo acima) que funciona no Chrome / Mac?

Não sei exatamente o que você está tentando alcançar, mas este é um método que usei no passado com sucesso para forçar o navegador a redesenhar, talvez ele funcione para você.

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

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

Se esse redesenho simples não funcionar, tente este. Ele insere um nó de texto vazio no elemento que garante um redesenho.

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: Em resposta ao Šime Vidas, o que estamos alcançando aqui seria um refluxo forçado. Você pode descobrir mais com o próprio mestre http://paulirish.com/2011/dom-html5-css3-performance/

Nenhuma das respostas acima funcionou para mim. Notei que redimensionar minha janela causou um redesenho. Então, isso fez isso por mim:

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

Recentemente, descobrimos isso e descobrimos que a promoção do elemento afetado para uma camada composta com o translateZ corrigia o problema sem a necessidade de javascript extra.

.willnotrender { 
   transform: translateZ(0); 
}

Como esses problemas de pintura aparecem principalmente no Webkit / Blink, e essa correção visa principalmente o Webkit / Blink, é preferível em alguns casos. Especialmente porque muitas soluções JavaScript causam reflow e repintam , não apenas repintam.

Esta solução sem timeouts! Força real redesenhada! Para Android e iOS.

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

Isso funciona para mim. Parabéns aqui .

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

$(el).redraw();

Ocultar um elemento e mostrá-lo novamente dentro de um setTimeout de 0 forçará um redesenho.

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

Isso parece fazer o truque para mim. Além disso, ele realmente não aparece.

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

ligar window.getComputedStyle() deve forçar um reflow

Encontrei esse desafio hoje no OSX El Capitan com o Chrome v51. A página em questão funcionou bem no Safari. Tentei quase todas as sugestões desta página - nenhuma funcionou corretamente - todas tiveram efeitos colaterais ... Acabei implementando o código abaixo - super simples - sem efeitos colaterais (ainda funciona como antes no Safari).

Solução: alterne uma classe no elemento problemático, conforme necessário. Cada alternância forçará um redesenho. (Eu usei o jQuery por conveniência, mas o baunilha JavaScript não deve ser problema ...)

Alternar classe jQuery

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

Classe CSS

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

E é isso...

NOTA: Você precisa executar o snippet abaixo de "Página completa" para ver o efeito.

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

chame essa função após 500 milissegundos.

Se você deseja preservar os estilos declarados em suas folhas de estilo, é melhor usar algo como:

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: com o webkit / piscamento mais recente, armazenando o valor de offsetHeight é obrigatório para ativar a repintagem; caso contrário, a VM (para fins de otimização) provavelmente ignorará essa instrução.

Atualização: adicionada a segunda offsetHeightleitura, é necessário impedir que o navegador enfileire / armazene em cache uma alteração de propriedade / classe CSS a seguir com a restauração do displayvalor (dessa maneira, uma transição CSS que possa ser seguida deve ser renderizada)

Exemplo de HTML:

<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

    };

função de chamada:

$('article.child').redraw(); // <== má ideia

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

Uma abordagem que funcionou para mim no IE (não consegui usar a técnica de exibição porque havia uma entrada que não deve perder o foco)

Funciona se você tiver margem 0 (alterar o preenchimento também funciona)

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

Apenas CSS. Isso funciona para situações em que um elemento filho é removido ou adicionado. Nessas situações, bordas e cantos arredondados podem deixar artefatos.

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

Minha correção para o IE10 + IE11. Basicamente, o que acontece é que você adiciona um DIV dentro de um elemento de quebra automática que precisa ser recalculado. Em seguida, basta removê-lo e pronto; Funciona como um encanto :)

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

A maioria das respostas requer o uso de um tempo limite assíncrono, o que causa um piscar de olhos irritante.

Mas eu vim com este aqui, que funciona sem problemas porque é sincrônico:

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

Esta é a minha solução que funcionou para desaparecer o conteúdo ...

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

Corri para um problema semelhante e esta linha simples de JS ajudou a corrigi-lo:

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

No meu caso, foi um bug com uma extensão do Chrome que não redesenhava a página depois de alterar seu CSS de dentro da extensão.

Eu queria retornar todos os estados ao estado anterior (sem recarregar), incluindo os elementos adicionados pelo jquery. A implementação acima não funciona. e fiz o seguinte.

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

Eu tinha uma lista de componentes de reação que, quando rolada, abriu outra página e, ao retornar, a lista não era renderizada no Safari iOS até a página ser rolada. Então essa é a correção.

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

Abaixo o css funciona para mim no IE 11 e no Edge, nenhum JS é necessário. scaleY(1)faz o truque aqui. Parece a solução mais simples.

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

Me ajudou

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

2020: Mais leve e mais forte

As soluções anteriores não funcionam mais para mim.

Eu acho que os navegadores otimizam o processo de desenho detectando mais e mais alterações "inúteis".

Essa solução faz com que o navegador desenhe um clone para substituir o elemento original. Funciona e é provavelmente mais sustentável:

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

testado no Chrome 80 / Edge 80 / Firefox 75