我有一些简单的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的@danorton解决方案中苦苦挣扎的人的。 这个解决方案
sel.style.display='none';
sel.offsetHeight;
sel.style.display='';
适用于我只有“buildOptimizer”:false在angular。json文件。 看起来优化器以某种方式破坏了这个。
其他回答
这将强制重绘，同时避免闪烁，现有的元素修补和任何布局问题…
function forceRepaint() {
requestAnimationFrame(()=>{
const e=document.createElement('DIV');
e.style='position:fixed;top:0;left:0;bottom:0;right:0;background:#80808001;\
pointer-events:none;z-index:9999999';
document.body.appendChild(e);
requestAnimationFrame(()=>e.remove());
});
}
我们最近遇到了这个问题，并发现使用CSS中的translateZ将受影响的元素提升到复合层可以解决这个问题，而不需要额外的JavaScript。
.willnotrender {
transform: translateZ(0);
}
由于这些绘画问题主要出现在Webkit/Blink中，而此修复主要针对Webkit/Blink，在某些情况下更可取。特别是因为公认的答案几乎肯定会导致回流和重涂，而不仅仅是重涂。
Webkit和Blink一直在努力提高渲染性能，而这些小故障是优化的副作用，目的是减少不必要的流程和油漆。CSS将会改变，或者其他后续的规范将是未来的解决方案，很可能。
还有其他实现复合层的方法，但这是最常见的。
这对JS来说很好
sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='block';
但在Jquery中，特别是当你只能使用$(document)时。Ready并且由于任何特定原因不能绑定到对象的.load事件，下面将工作。
您需要获取对象/div的OUTER(MOST)容器，然后将其所有内容删除到一个变量中，然后重新添加它。 它将使所有在外部容器内所做的更改可见。
$(document).ready(function(){
applyStyling(object);
var node = $("div#body div.centerContainer form div.centerHorizontal").parent().parent();
var content = node.html();
node.html("");
node.html(content);
}
我遇到了一个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}})" / >
我希望这个答案能让其他人省下一天砸键盘的时间。
一个简单的解决方案与jquery:
$el.html($el.html());
or
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上正确渲染。
