首页 > web前端 > js教程 > 如何在 macOS 上的 Chrome 中强制 DOM 重绘?

如何在 macOS 上的 Chrome 中强制 DOM 重绘?

Linda Hamilton
发布: 2024-12-21 09:56:15
原创
751 人浏览过

How to Force a DOM Redraw in Chrome on macOS?

在 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板