Why Doesn't WebKit Update Styles Automatically, and How Can I Force a Repaint?

Forcing WebKit to Update Styles

You are facing an issue where a style change applied through JavaScript is not propagating to all the affected elements in WebKit-based browsers like Chrome and Safari. This can sometimes be seen when multiple elements inherit styles from a common ancestor with children that have focus or contain interactive elements such as links.

WebKit's Unresponsiveness

WebKit does not automatically repaint when it receives updates to inherited styles. This is in contrast to other browsers like Firefox, Opera, and IE, which handle these changes more seamlessly.

Forcing a Repaint Through Nudging

Since WebKit does not update styles automatically, you can force a repaint by making a minor change to any element on the page. In the Chrome Developer Tools, you observed that even unchecking and rechecking an attribute of an arbitrary element triggered the correct style update.

Proposed Solution

To force a repaint programmatically, you can use the following technique:

sel.style.display = 'none';
sel.offsetHeight; // no need to store this anywhere, just referencing it is sufficient
sel.style.display = '';

This approach involves temporarily hiding and then unhiding the element. The offsetHeight line ensures that the browser actually applies the changes. You do not need to store the height it returns.

Potential Limitation

The provided solution is confirmed to work for elements with "block" display. It is possible that it may exhibit different behavior for elements with other display modes, but this requires further investigation.

The above is the detailed content of Why Doesn't WebKit Update Styles Automatically, and How Can I Force a Repaint?. For more information, please follow other related articles on the PHP Chinese website!