我有一些简单的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做正确的事情?
当前回答
这段代码将重新渲染css
document.body.style.display = 'flex';
setTimeout(() => (document.body.style.display = ''), 0);
其他回答
我也有同样的问题。danorton的“切换显示”修复在添加到我的动画的阶跃功能时确实为我工作，但我担心性能，我寻找其他选项。
在我的情况下，没有重绘的元素位于绝对位置元素中，当时它没有z指数。添加一个z-index到这个元素改变了Chrome的行为和重绘发生的预期->动画变得流畅。
我怀疑这是灵丹妙药，我想这取决于为什么Chrome选择不重画元素，但我在这里发布这个具体的解决方案，希望有人帮助。
欢呼, 抢劫
尝试为元素或其父元素添加z-index。
我遇到了一个SVG的问题，当方向在某些情况下发生改变时，它在Chrome for Android上消失了。下面的代码没有重现它，但是我们的设置。
body { font-family: tahoma, sans-serif; font-size: 12px; margin: 10px; } article { display: flex; } aside { flex: 0 1 10px; margin-right: 10px; min-width: 10px; position: relative; } svg { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .backgroundStop1 { stop-color: #5bb79e; } .backgroundStop2 { stop-color: #ddcb3f; } .backgroundStop3 { stop-color: #cf6b19; } <article> <aside> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%"> <defs> <linearGradient id="IndicatorColourPattern" x1="0" x2="0" y1="0" y2="1"> <stop class="backgroundStop1" offset="0%"></stop> <stop class="backgroundStop2" offset="50%"></stop> <stop class="backgroundStop3" offset="100%"></stop> </linearGradient> </defs> <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" fill="url(#IndicatorColourPattern)"></rect> </svg> </aside> <section> <p>Donec et eros nibh. Nullam porta, elit ut sagittis pulvinar, lacus augue lobortis mauris, sed sollicitudin elit orci non massa. Proin condimentum in nibh sed vestibulum. Donec accumsan fringilla est, porttitor vestibulum dolor ornare id. Sed elementum urna sollicitudin commodo ultricies. Curabitur tristique orci et ligula interdum, eu condimentum metus eleifend. Nam libero augue, pharetra at maximus in, pellentesque imperdiet orci.</p> <p>Fusce commodo ullamcorper ullamcorper. Etiam eget pellentesque quam, id sodales erat. Vestibulum risus magna, efficitur sed nisl et, rutrum consectetur odio. Sed at lorem non ligula consequat tempus vel nec risus.</p> </section> </article>
经过一天半的摸索，我对这里提供的俗气的解决方案并不满意，我发现这个问题是由于它在绘制新元素时似乎将元素保留在内存中引起的。解决方案是让SVG上的线性梯度的ID是唯一的，即使它在每页只使用一次。
这可以通过许多不同的方式实现，但对于我们的angular应用程序，我们使用lodash uniqueId函数向作用域添加一个变量:
Angular指令(JS):
scope.indicatorColourPatternId = _.uniqueId('IndicatorColourPattern');
HTML的更新:
第5行:<linearGradient ng- atr -id="{{indicatorColourPatternId}}" x1="0" x2="0" y1="0" y2="1">
第11行:<rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" ng- atr -fill="url(#{{indicatorColourPatternId}})" / >
我希望这个答案能让其他人省下一天砸键盘的时间。
我今天偶然发现了这个: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()。有时重绘父元素并不能解决子元素正在经历的问题。
关于浏览器渲染元素方式的好文章:渲染:重绘，回流/重布局，重样式
丹诺顿方案对我不起作用。我有一些非常奇怪的问题，webkit不会画一些元素在所有;输入中的文本直到onblur才更新;并且改变className不会导致重绘。
我偶然发现，我的解决方案是在脚本之后向正文添加一个空的样式元素。
<body>
...
<script>doSomethingThatWebkitWillMessUp();</script>
<style></style>
...
这就解决了问题。这有多奇怪?希望这对某些人有所帮助。
我正在开发ionic html5应用程序，在少数屏幕上我有绝对定位元素，当在IOS设备(iPhone 4,5,6,6 +)上向上或向下滚动时，我有重绘错误。
尝试了许多解决方案，没有一个是有效的，只有这个解决了我的问题。
我使用css类。fixrepaint这些绝对位置的元素
.fixRepaint{
transform: translateZ(0);
}
这已经解决了我的问题，它可能会帮助别人
