如何在 macOS 上的 Chrome 中可靠地强制 DOM 重绘？

在 Chrome/Mac 上强制 DOM 重绘：渲染问题的解决方案

在某些情况下，Mac 上的 Chrome 可能无法正确渲染 HTML/CSS，尽管有标记有效性。常见的解决方案包括修改 CSS 属性并检索 offsetHeight 以强制重绘。但是，此方法在 Chrome/Mac 中不再有效。

为了解决此问题，在 Chrome/Mac 上有效的替代方法涉及暂时更改有问题元素的边框：

$(el).css("border", "solid 1px transparent");
setTimeout(function()
    {
        $(el).css("border", "solid 0px transparent");
    }, 1000);

这会强制元素重新定位，确保重绘。然而，缺点是涉及延迟，这可能会分散视觉注意力。

更可靠的方法是在元素中插入一个空文本节点：

var forceRedraw = function(element){
    if (!element) { return; }
    var n = document.createTextNode(' ');
    var disp = element.style.display;
    element.appendChild(n);
    element.style.display = 'none';
    setTimeout(function(){
        element.style.display = disp;
        n.parentNode.removeChild(n);
    },20);
}

此技术保证无需视觉跳跃即可重绘。通过修改display属性，插入文本节点，触发DOM重排，准确显示元素。

以上是如何在 macOS 上的 Chrome 中可靠地强制 DOM 重绘？的详细内容。更多信息请关注PHP中文网其他相关文章！