JavaScript Snippet Force a DOM Element Redraw/Repaint

JavaScript code snippet to force a DOM element redraw/repaint. A bit hacky but useful as a last resort.


var element = document.getElementById('id');
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

Using Transit.js

If your using a transition plugin like transit.js this also works:


$('#element')
    .transition({ x: '-500px', easing: 'snap', duration:'0' })
    .transition({ x: '0', easing: 'snap', duration:'0' })
    .css('z-index','10');

CSS:


#element {
     position: absolute;
     right: '-500px';
     z-index: -1;
}

Frequently Asked Questions (FAQs) about Forcing DOM Element Redraw/Repaint

What is DOM element redraw/repaint in JavaScript?

In JavaScript, a Document Object Model (DOM) element redraw or repaint refers to the process of updating the visual representation of an element on a webpage. This is often necessary when changes have been made to the element’s style or content. The browser automatically handles most redraws and repaints, but in some cases, you may need to manually trigger this process using JavaScript. This can be useful in situations where you want to ensure that an element is updated immediately, rather than waiting for the browser’s next repaint cycle.

Why would I need to force a DOM element to redraw/repaint?

There are several reasons why you might need to force a DOM element to redraw or repaint. One common reason is to fix a visual glitch or anomaly that has occurred due to a change in the element’s style or content. Another reason is to ensure that an element is updated immediately after a change, rather than waiting for the browser’s next repaint cycle. This can be particularly useful in situations where you need to provide real-time feedback to the user, such as in a game or interactive application.

How can I force a DOM element to redraw/repaint using JavaScript?

You can force a DOM element to redraw or repaint using JavaScript by making a small, temporary change to the element’s style or content. This will trigger the browser’s repaint process, causing the element to be updated immediately. Here’s a simple example:

var element = document.getElementById('myElement');
element.style.display = 'none';
element.offsetHeight; // no need to store this anywhere, the reference is enough
element.style.display = '';

Can I force a DOM element to redraw/repaint using jQuery?

Yes, you can force a DOM element to redraw or repaint using jQuery. The process is similar to the JavaScript method, but with a few minor differences. Here’s an example:

var $element = $('#myElement');
$element.hide().show(0);

Are there any potential issues or drawbacks to forcing a DOM element to redraw/repaint?

While forcing a DOM element to redraw or repaint can be useful in certain situations, it’s important to be aware that it can also have a negative impact on performance. Redrawing and repainting operations can be resource-intensive, especially for complex elements or large amounts of data. Therefore, it’s generally recommended to use this technique sparingly, and only when necessary.

Is there a difference between a redraw and a repaint in JavaScript?

In the context of JavaScript and the DOM, a redraw and a repaint essentially refer to the same process: updating the visual representation of an element on a webpage. However, some developers use the term “redraw” to refer specifically to changes that affect the layout of the page (such as changing the size or position of an element), while “repaint” refers to changes that affect the appearance of an element (such as changing its color or background image).

Can I force a redraw/repaint of all elements on a page?

Yes, it’s possible to force a redraw or repaint of all elements on a page by making a small, temporary change to the body element’s style or content. However, this should be done with caution, as it can be very resource-intensive and may cause performance issues.

Can I force a redraw/repaint of a specific part of a page?

Yes, you can force a redraw or repaint of a specific part of a page by targeting a specific DOM element or group of elements. This can be done using either plain JavaScript or jQuery, as shown in the examples above.

Does forcing a redraw/repaint work in all browsers?

The technique of forcing a redraw or repaint by making a small, temporary change to an element’s style or content should work in all modern browsers. However, it’s always a good idea to test your code in multiple browsers to ensure compatibility.

Can I use CSS to force a redraw/repaint?

Yes, you can use CSS to force a redraw or repaint by making a small, temporary change to an element’s style. This can be done by adding or removing a CSS class, or by directly modifying the element’s style properties. However, this method may not be as reliable as using JavaScript or jQuery, as it depends on the browser’s CSS rendering engine.