在 Chrome/Mac 上强制 DOM 重绘
当 Mac 设备上的 Chrome 错误地呈现有效的 HTML/CSS 元素时,就会出现此问题。虽然检查 DOM 通常会触发正确的重绘,但由于优化阻止了 offsetHeight 触发重绘,此 hack 在 Chrome/Mac 上失败。
以下 hack 是一种解决方法:
$(el).css("border", "solid 1px transparent"); setTimeout(function() { $(el).css("border", "solid 0px transparent"); }, 1000);
这会迫使元素稍微跳跃,从而触发重绘。但是,延迟是显而易见的。
另一种方法是使用此方法:
$('#parentOfElementToBeRedrawn').hide().show(0); // in plain js document.getElementById('parentOfElementToBeRedrawn').style.display = 'none'; document.getElementById('parentOfElementToBeRedrawn').style.display = 'block';
此方法会隐藏然后显示父元素,强制重绘。
如果此方法失败,则以下函数通过将空文本节点插入到element:
var forceRedraw = function(element){ if (!element) { return; } var n = document.createTextNode(' '); var disp = element.style.display; // don't worry about previous display style element.appendChild(n); element.style.display = 'none'; setTimeout(function(){ element.style.display = disp; n.parentNode.removeChild(n); },20); // you can play with this timeout to make it as short as possible }
这种技术本质上是强制回流,更新布局并触发重绘。
以上是如何在 macOS 上的 Chrome 中强制 DOM 重绘?的详细内容。更多信息请关注PHP中文网其他相关文章!