我有一些简单的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做正确的事情?


当前回答

我在使用Angular 10时也遇到了同样的问题。我尝试了许多方法,但似乎都不起作用。 对我来说有效的修复是通过JS处理它。我只是从DOM中删除了元素,并使用ngIf再次添加。

HTML:

<div *ngIf="showElement">
  Contents of your element
</div>

JS:

this.showElement = false;
setTimeout(() => {
  this.showElement = true;
}, 10);

其他回答

我在使用Angular 10时也遇到了同样的问题。我尝试了许多方法,但似乎都不起作用。 对我来说有效的修复是通过JS处理它。我只是从DOM中删除了元素,并使用ngIf再次添加。

HTML:

<div *ngIf="showElement">
  Contents of your element
</div>

JS:

this.showElement = false;
setTimeout(() => {
  this.showElement = true;
}, 10);

并不是说这个问题需要另一个答案,而是我发现,在我的特定情况下,仅仅改变一点颜色就会迫使我重新绘制。

//Assuming black is the starting color, we tweak it by a single bit
elem.style.color = '#000001';

//Change back to black
setTimeout(function() {
    elem.style.color = '#000000';
}, 0);

setTimeout被证明是将第二个样式更改移到当前事件循环之外的关键。

我也有同样的问题。danorton的“切换显示”修复在添加到我的动画的阶跃功能时确实为我工作,但我担心性能,我寻找其他选项。

在我的情况下,没有重绘的元素位于绝对位置元素中,当时它没有z指数。添加一个z-index到这个元素改变了Chrome的行为和重绘发生的预期->动画变得流畅。

我怀疑这是灵丹妙药,我想这取决于为什么Chrome选择不重画元素,但我在这里发布这个具体的解决方案,希望有人帮助。

欢呼, 抢劫

尝试为元素或其父元素添加z-index。

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

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

i.e.

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

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

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

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