How to Force DOM Redraws in Chrome on macOS?

Force DOM Redraw on Chrome/Mac Using Different Approaches

In certain scenarios, Chrome on Mac may fail to redraw HTML/CSS elements correctly, even when the code is valid. To address this issue, developers often resort to forcing a redraw using CSS transformations or border manipulations.

The standard approach, using CSS transformations, involves temporarily modifying the '-webkit-transform' property, retrieving the offsetHeight to trigger a redraw, and then restoring the original transform value. However, this method does not work on Chrome/Mac.

To overcome this limitation, an alternative approach is to toggle the border property, effectively forcing the element to jump slightly and then revert to its original state. This approach requires a timeout to ensure sufficient time for the redraw to occur.

Another method, suggested in the answer, involves hiding and showing the parent element of the element that needs to be redrawn. This simple redraw may suffice for most cases.

For more complex situations, the "forceRedraw" function inserts an empty text node into the element and then removes it, guaranteeing a redraw. The timeout in this function controls the speed of the visual jump.

Understanding Forced Reflow

The techniques described here aim to force a "reflow," a process by which the browser recalculates the layout of a document. By triggering a reflow, these methods ensure that the browser correctly renders the affected elements.

The above is the detailed content of How to Force DOM Redraws in Chrome on macOS?. For more information, please follow other related articles on the PHP Chinese website!