Last Updated: October 04, 2020

Force redraw on an element (jQuery)

This snippet can help in cases where the browser doesn't redraw an updated element properly.

$.fn.redraw = function(){
  $(this).each(function(){
    var redraw = this.offsetHeight;
  });
};

You'd then call the method like this:

$('.theElement').redraw();

More info can be found here on why it works: http://apmblog.compuware.com/2009/12/12/understanding-internet-explorer-rendering-behaviour/

#javascript

#browsers

#jquery

Written by Jack Hsu

Say Thanks

Respond

Related protips

Don't use Array.forEach, use for() instead

1.233M

How to check if JavaScript Object is empty

1.099M

JavaScript iterate through object keys and values

590.3K

2 Responses

Add your response

chestermjr

Return the original jQuery collection to allow chaining. These comments don't allow code formatting, but:
$.fn.redraw = function() {
$(this).each(function() {
var redraw = this.offsetHeight;
});
return $(this);
};

over 1 year ago ·

mozzy

Actually adding a return in front of $(this).each should do the trick for chaining.
$.fn.redraw = function(){
return $(this).each(function(){
var redraw = this.offsetHeight;
});
};

over 1 year ago ·