如何在 Mac 上的 Chrome 中强制 DOM 重绘？

在 Chrome/Mac 上强制 DOM 重绘

问题：
在 Chrome for Mac 中，强制重绘使用常见的 offsetHeight 技巧不会工作。

当前黑客：
解决方法包括添加和删除边框以强制元素在视觉上跳跃。但是，它会带来明显的延迟，并且在较低的超时下可能无效。

建议的解决方案：
已证明成功的替代方法是：

// in jQuery
$('#parentOfElementToBeRedrawn').hide().show(0);

// in plain JS
document.getElementById('parentOfElementToBeRedrawn').style.display = 'none';
document.getElementById('parentOfElementToBeRedrawn').style.display = 'block';

改进的解决方案：
为了更有保证的重绘，以下方法插入一个空将文本节点插入到元素中：

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); // Adjust timeout as needed
};

此方法可确保完整的 DOM 重绘，可能解决 Mac 版 Chrome 中渲染不正确的问题。

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