Erzwinge DOM-Neuzeichnen / Aktualisieren auf Chrome / Mac

Nicht genau wissen, was Sie zu erreichen versuchen, aber das ist eine Methode, die ich verwendet haben in der Vergangenheit mit Erfolg zu zwingen, den browser neu zu zeichnen, vielleicht wird es für Sie arbeiten.

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

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

Wenn diese einfach nachzeichnen nicht funktioniert, können Sie versuchen, diese ein. Es fügt eine leere text-Knoten in das element, welches garantiert neu.

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 Reaktion auf Šime Vidas, was wir erreichen hier wäre eine Zwangs-reflow. Sie können herausfinden, mehr vom Meister selbst http://paulirish.com/2011/dom-html5-css3-performance/

InformationsquelleAutor der Antwort Juank

Diese Lösung ohne timeouts! Real Kraft neu zeichnen! Für Android und iOS.

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

InformationsquelleAutor der Antwort aviomaksim

Dies funktioniert für mich. Großes Lob gebührt hier.

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

$(el).redraw();

InformationsquelleAutor der Antwort zupa

Das scheint, den trick zu tun für mich. Plus, es ist wirklich nicht zeigen überhaupt.

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

InformationsquelleAutor der Antwort Xavier Follet

Wenn Sie möchten, erhalten die styles erklärte in Ihren stylesheets, besser, etwas zu verwenden, wie:

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: mit dem neuesten webkit/blink, speichern den Wert von offsetHeight ist zwingend erforderlich, damit trigger die repaint, da sonst die VM (für Optimierungen Zwecke) wird wahrscheinlich überspringen Sie die Anweisung.

Update: es wurde die zweite offsetHeight Lesen, es ist notwendig, um zu verhindern, dass browser von queueing - /Zwischenspeichern eines folgenden CSS-Eigenschaft/Klasse ändern sich mit der Wiederherstellung der display Wert (auf diese Weise eine CSS-transition, die Folgen können, dargestellt werden soll)

InformationsquelleAutor der Antwort guari

Einen Ansatz, der arbeitete für mich auf IE (den ich nicht nutzen konnte, die display-Technik, da gab es einen Eingang, der darf nicht Locker-Fokus)

Es funktioniert, wenn man 0-Marge (änderung der Polsterung als gut funktioniert)

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

InformationsquelleAutor der Antwort Rogel Garcia

Mein fix für IE10 + IE11. Im Grunde, was passiert ist, dass Sie fügen Sie ein DIV innerhalb einer Verpackung-element berechnet werden. Dann entfernen Sie einfach es und voila, funktioniert wie ein Charme 🙂

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

InformationsquelleAutor der Antwort Narayan

Dies ist meine Lösung, arbeitete für das verschwinden von Inhalten...

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

InformationsquelleAutor der Antwort Kosmos

Ich lief in ein ähnliches Problem und diese einfache Zeile von JS geholfen, um es zu beheben:

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

In meinem Fall war es ein bug mit einer Chrome-Erweiterung, nicht Neuaufbau der Seite nach dem ändern seine CSS aus der extension.

InformationsquelleAutor der Antwort Rotareti