How Can I Force WebKit to Repaint and Apply Style Changes?

Forcing WebKit Repaints to Apply Style Changes

In certain scenarios, JavaScript style changes might fail to propagate in WebKit browsers like Chrome and Safari. This can occur when manipulating classes or styles of an element, particularly if the affected elements share a parent and sibling relationship.

To address this, a workaround can be employed to force WebKit to perform a redraw or repaint, thus propagating the style changes. A user named Vasil Dinkov discovered a simple hack that involves toggling the display property of the affected element:

sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='';

By temporarily hiding the element and then displaying it again, this code forces WebKit to repaint the element, ensuring that the style changes are applied. Note that this solution has been reported to work effectively for styles such as "block." Further testing is recommended to determine its applicability to other style types.

The above is the detailed content of How Can I Force WebKit to Repaint and Apply Style Changes?. For more information, please follow other related articles on the PHP Chinese website!