在 Chrome/Mac 上强制 DOM 重绘/刷新

如果您想保留在样式表中声明的样式，最好使用以下内容：

jQuery.fn.redraw = function() {
    this.css('display', 'none'); 
    var temp = this[0].offsetHeight;
    this.css('display', '');
    temp = this[0].offsetHeight;
};

$('.layer-to-repaint').redraw();

注意：对于最新的 webkit/blink，必须存储 offsetHeight 的值才能触发重绘，否则 VM（出于优化目的）可能会跳过该指令。

更新：添加了第二个 offsetHeight 读数，有必要通过恢复 display 值来防止浏览器排队/缓存以下 CSS 属性/类更改（这样应该呈现可以跟随的 CSS 转换）

仅限 CSS。这适用于删除或添加子元素的情况。在这些情况下，边框和圆角可能会留下伪影。

el:after { content: " "; }
el:before { content: " "; }

function resizeWindow(){
    var evt = document.createEvent('UIEvents');
    evt.initUIEvent('resize', true, false,window,0);
    window.dispatchEvent(evt); 
}

500 毫秒后调用此函数。

下面的 css 在 IE 11 和 Edge 上适用于我，不需要 JS。 scaleY(1) 在这里起到了作用。似乎是最简单的解决方案。

.box {
    max-height: 360px;
    transition: all 0.3s ease-out;
    transform: scaleY(1);
}
.box.collapse {
    max-height: 0;
}

它帮助了我

domNodeToRerender.style.opacity = 0.99;
setTimeout(() => { domNodeToRerender.style.opacity = '' }, 0);

2020 年 10 月，Chrome 85 的问题仍然存在。

morewry 使用 transform:translateZ(0) 的解决方案实际上可以使用任何转换，包括 translate(0,0) 和 scale(1)，但是如果您必须再次更新元素，那么诀窍就是切换转换，并且最好的方法是在一帧后使用 requestAnimationFrame 直接删除它（应始终避免使用 setTimeout，因为它会更慢，因此可能会导致故障）。

所以，更新一个元素：

    function refresh_element(node) {
        // you can use scale(1) or translate(0, 0), etc
        node.style.setProperty('transform', 'translateZ(0)');
        // this will remove the property 1 frame later
        requestAnimationFrame(() => {
            node.style.removeProperty('transform');
        });
    }

20ms 后这对我有用：

const forceRedraw = elem => {
  const t = elem.ownerDocument.createTextNode(' ') ;
  elem.appendChild(t) ;
  setTimeout(() => { elem.removeChild(t) }, 0) ;
}

一种在 IE 上对我有用的方法（我不能使用显示技术，因为有一个输入不能失去焦点）

如果您的边距为 0，它就可以工作（更改填充也可以）

if(div.style.marginLeft == '0px'){
    div.style.marginLeft = '';
    div.style.marginRight = '0px';
} else {
    div.style.marginLeft = '0px';
    div.style.marginRight = '';
}

示例 HTML：

<section id="parent">
  <article class="child"></article>
  <article class="child"></article>
</section>

JS：

  jQuery.fn.redraw = function() {
        return this.hide(0,function() {$(this).show(100);});
        // hide immediately and show with 100ms duration

    };

调用函数：

$('article.child').redraw(); //<==坏主意

$('#parent').redraw();

我对 IE10 + IE11 的修复。基本上发生的情况是您在必须重新计算的包装元素中添加了一个 DIV。然后只需将其删除即可；奇迹般有效 ：）

    _initForceBrowserRepaint: function() {
        $('#wrapper').append('<div style="width=100%" id="dummydiv"></div>');
        $('#dummydiv').width(function() { return $(this).width() - 1; }).width(function() { return $(this).width() + 1; });
        $('#dummydiv').remove();
    },

大多数答案需要使用异步超时，这会导致令人讨厌的眨眼。

但我想出了这个，它运行顺利，因为它是同步的：

var p = el.parentNode,
    s = el.nextSibling;
p.removeChild(el);
p.insertBefore(el, s);

这是我的解决方案，适用于消失的内容......

<script type = 'text/javascript'>
    var trash_div;

    setInterval(function()
    {
        if (document.body)
        {
            if (!trash_div)
                trash_div = document.createElement('div');

            document.body.appendChild(trash_div);
            document.body.removeChild(trash_div);
        }
    }, 1000 / 25); //25 fps...
</script>

我想将所有状态返回到以前的状态（不重新加载），包括 jquery 添加的元素。上面的实现是行不通的。我做了如下。

// Set initial HTML description
var defaultHTML;
function DefaultSave() {
  defaultHTML = document.body.innerHTML;
}
// Restore HTML description to initial state
function HTMLRestore() {
  document.body.innerHTML = defaultHTML;
}



DefaultSave()
<input type="button" value="Restore" onclick="HTMLRestore()">

我遇到了类似的问题，这行简单的 JS 有助于解决它：

document.getElementsByTagName('body')[0].focus();

就我而言，这是一个 Chrome 扩展程序在从扩展程序中更改其 CSS 后未重绘页面的错误。

我有一个反应组件列表，当滚动时，然后打开另一个页面，然后返回时，列表不会在 Safari iOS 上呈现，直到页面滚动。所以这就是修复。

    componentDidMount() {
        setTimeout(() => {
            window.scrollBy(0, 0);
        }, 300);
    }