我有一些简单的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);

其他回答

我使用transform: translateZ(0);方法,但在某些情况下是不够的。

我不喜欢添加和删除一个类,所以我试图找到解决这个问题的方法,最后用一个新的黑客,工作得很好:

@keyframes redraw{
    0% {opacity: 1;}
    100% {opacity: .99;}
}

// ios redraw fix
animation: redraw 1s linear infinite;

我今天偶然发现了这个:Element.redraw() for prototype.js

使用:

Element.addMethods({
  redraw: function(element){
    element = $(element);
    var n = document.createTextNode(' ');
    element.appendChild(n);
    (function(){n.parentNode.removeChild(n)}).defer();
    return element;
  }
});

但是,我注意到有时必须直接在有问题的元素上调用redraw()。有时重绘父元素并不能解决子元素正在经历的问题。

关于浏览器渲染元素方式的好文章:渲染:重绘,回流/重布局,重样式

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

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

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

欢呼, 抢劫

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

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

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

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

因为每个人似乎都有自己的问题和解决方案,我想我应该添加一些适合我的东西。在Android 4.1与当前的Chrome,试图拖动一个画布在一个div溢出:隐藏,我不能得到重画,除非我添加了一个元素的父div(在那里它不会做任何伤害)。

var parelt = document.getElementById("parentid");
var remElt = document.getElementById("removeMe");
var addElt = document.createElement("div");
addElt.innerHTML = " "; // Won't work if empty
addElt.id="removeMe";
if (remElt) {
    parelt.replaceChild(addElt, remElt);
} else {
    parelt.appendChild(addElt);
}

没有屏幕闪烁或真正的更新,并清理自己。没有全局变量或类作用域变量,只有局部变量。在移动Safari/iPad或桌面浏览器上似乎没有任何损害。