我怎样才能强迫WebKit重绘/重绘来传播样式变化?

我有一些简单的JavaScript来影响风格的变化:

sel = document.getElementById('my_id');
sel.className = sel.className.replace(/item-[1-9]-selected/,'item-1-selected');
return false;

这适用于最新版本的FF、Opera和IE，但不适用于最新版本的Chrome和Safari。

它会影响两个后代，而这两个后代恰好是兄弟姐妹。第一个兄弟更新，但第二个没有。第二个元素的子元素也有焦点，并包含< A >标记，该标记在onclick属性中包含上述代码。

在Chrome的“开发人员工具”窗口中，如果我轻推(例如取消勾选&勾选)任何元素的任何属性，第二个兄弟更新为正确的样式。

是否有一种解决方法可以简单地通过编程“推动”WebKit做正确的事情?

当前回答

对我来说唯一有效的解决方案类似于sowasred2012的答案:

$('body').css('display', 'table').height();
$('body').css('display', 'block');

我在页面上有很多问题块，所以我改变了根元素的显示属性。我使用display: table;而不是display: none;，因为none将重置滚动偏移量。

其他回答

这个答案是给那些在使用Angular 10的@danorton解决方案中苦苦挣扎的人的。这个解决方案

sel.style.display='none';
sel.offsetHeight;
sel.style.display='';

适用于我只有“buildOptimizer”:false在angular。json文件。看起来优化器以某种方式破坏了这个。

一个简单的解决方案与jquery:

$el.html($el.html());

element.innerHTML = element.innerHTML;

有一个SVG，当它被添加到html时不显示。

这可以在svg元素出现在屏幕上之后添加。

更好的解决方案是使用:

document.createElementNS('http://www.w3.org/2000/svg', 'svg');

使用jQuery:

$(svgDiv).append($(document.createElementNS('http://www.w3.org/2000/svg', 'g'));

这将在Chrome上正确渲染。

由于显示+偏移触发不适合我，我在这里找到了一个解决方案:

http://mir.aculo.us/2009/09/25/force-redraw-dom-technique-for-webkit-based-browsers/

i.e.

element.style.webkitTransform = 'scale(1)';

这段代码将重新渲染css

 document.body.style.display = 'flex';
 setTimeout(() => (document.body.style.display = ''), 0);

我发现@morewry的出色回答解决了我的问题，而且will-change属性已经到达。

CSS将会改变，或者其他后续的规范将是未来的解决方案，很可能。

在我的例子中，will-change: transform的值;单独在Safari 14中有效。

.wont-update {
    will-change: transform;

    /* for Safari < 9.1 */
    transform: translateZ(0);
}

https://developer.mozilla.org/en-US/docs/Web/CSS/will-change https://caniuse.com/will-change

推荐文章