隐藏一个元素，然后在setTimeout为0的情况下再次显示它将强制重绘。

$('#page').hide();
setTimeout(function() {
    $('#page').show();
}, 0);

这是我解决内容消失的方法……

<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>

不确定你到底想要达到什么目的，但这是我过去使用的一种方法，成功地迫使浏览器重新绘制，也许它对你有用。

// 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;  // 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
}

编辑:在回应Šime Vidas，我们在这里实现的将是一个强制回流。你可以从大师本人http://paulirish.com/2011/dom-html5-css3-performance/找到更多信息

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

morewry的使用transform:translateZ(0)的解决方案，实际上，任何转换工作，包括translate(0,0)和scale(1)，但如果你必须再次更新元素，那么技巧是切换转换，最好的方法是直接删除它，在一帧后，使用requestAnimationFrame (setTimeout应该总是避免，因为它会更慢，所以它可能会导致故障)。

updateone元素:

    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');
        });
    }

我今天在Chrome v51的OSX El Capitan中遇到了这个挑战。这个页面在Safari中运行正常。我尝试了本页上几乎所有的建议——没有一个是正确的——所有的都有副作用……我最终实现了下面的代码——超级简单——没有副作用(在Safari中仍然像以前一样工作)。

解决方案:根据需要切换有问题元素上的类。每次切换都会强制重画。(我使用jQuery是为了方便，但普通的JavaScript应该没有问题…)

jQuery类切换

$('.slide.force').toggleClass('force-redraw');

CSS类

.force-redraw::before { content: "" }

就是这样……

注意:为了看到效果，你必须运行“Full Page”下面的代码片段。

$(window).resize(function() { $('.slide.force').toggleClass('force-redraw'); }); .force-redraw::before { content: ""; } html, body { height: 100%; width: 100%; overflow: hidden; } .slide-container { width: 100%; height: 100%; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; padding-left: 10%; padding-right: 5%; } .slide { position: relative; display: inline-block; height: 30%; border: 1px solid green; } .slide-sizer { height: 160%; pointer-events: none; //border: 1px solid red; } .slide-contents { position: absolute; top: 10%; left: 10%; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> This sample code is a simple style-based solution to maintain aspect ratio of an element based on a dynamic height. As you increase and decrease the window height, the elements should follow and the width should follow in turn to maintain the aspect ratio. You will notice that in Chrome on OSX (at least), the "Not Forced" element does not maintain a proper ratio. </p> <div class="slide-container"> <div class="slide"> <img class="slide-sizer" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"> <div class="slide-contents"> Not Forced </div> </div> <div class="slide force"> <img class="slide-sizer" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"> <div class="slide-contents"> Forced </div> </div> </div>

下面的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;
}