How Can I Force WebKit Repainting to Ensure Style Propagation to Descendant Elements?

Forcing WebKit Repainting for Style Propagation

When implementing JavaScript style changes, web developers may encounter inconsistencies between browsers. In WebKit-based browsers like Chrome and Safari, simple updates to an element's class name may fail to propagate to descendants.

This issue arises when updating siblings, with the first sibling receiving the new style but the second remaining unaffected. The presence of focus and an anchor tag within the affected element further complicates the situation.

Workaround: Triggering Repainting with Display Toggle

To resolve this problem in WebKit, a simple and effective workaround is to toggle the display property of the affected element:

sel.style.display = 'none';
sel.offsetHeight; // Accessing offsetHeight forces a reflow
sel.style.display = '';

This triggers a redraw or repaint operation, propagating the style changes to all descendants. It is worth noting that this technique has been confirmed to work for block-level elements, and its efficacy for other display types may require further exploration.

The above is the detailed content of How Can I Force WebKit Repainting to Ensure Style Propagation to Descendant Elements?. For more information, please follow other related articles on the PHP Chinese website!