Force DOM redraw/refresh on Chrome/Mac

by

Not sure exactly what you’re trying to achieve but this is a method I have used in the past with success to force the browser to redraw, maybe it will work for you.

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

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

If this simple redraw doesn’t work you can try this one. It inserts an empty text node into the element which guarantees a redraw.

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 response to Šime Vidas what we are achieving here would be a forced reflow. You can find out more from the master himself http://paulirish.com/2011/dom-html5-css3-performance/

More Related Contents:

  1. Trying to use Javascript to add new li element to my ordered list, anyone know why this code isn’t working?
  2. Check if an element contains a class in JavaScript?
  3. How to hide a in a menu with CSS?
  4. Changing CSS Values with Javascript
  5. jqGrid does not render correctly in Chrome/Chrome Frame
  6. How to retrieve the display property of a DOM element?
  7. JSFiddle code not working in my own page
  8. Get element CSS property (width/height) value as it was set (in percent/em/px/etc)
  9. Violation Long running JavaScript task took xx ms
  10. How to access CSS generated content with JavaScript
  11. “Uncaught TypeError: a.indexOf is not a function” error when opening new foundation project
  12. Trigger CSS transition on appended element
  13. How can I remove the “No file chosen” tooltip from a file input in Chrome?
  14. Is innerHTML asynchronous?
  15. Cannot access cssRules from local css file in Chrome 64
  16. Prevent Address-Bar hiding in mobile Browsers
  17. Can I apply CSS to the elements within an iframe?
  18. Console shows error about Content Security policy and lots of failed GET requests
  19. webkit-transform overwrites z-index ordering in Chrome 13
  20. link element onload
  21. How to inject CSS into webpage through Chrome extension?
  22. jQuery in Chrome returns “block” instead of “inline”
  23. Inject CSS stylesheet as string using Javascript
  24. Uncaught TypeError: Cannot read property ‘top’ of undefined
  25. forEach method of Node.childNodes?
  26. Javascript: Let user select an HTML element like Firebug?
  27. Print repeating Page headers in Chrome [closed]
  28. Can a website block a Chrome Extension? [duplicate]
  29. How to get element by class name
  30. Removing element with jQuery?

Leave a Comment