我有一些简单的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做正确的事情?
当前回答
这将强制重绘，同时避免闪烁，现有的元素修补和任何布局问题…
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());
});
}
其他回答
我发现，只是添加一个内容样式的元素强制它重新绘制，这应该是一个不同的值，每次你想要它重新绘制，而不需要在一个伪元素。
.selector {
content: '1'
}
这似乎与Safari中不应用jQuery样式有关
在第一个回应中建议的解决方案在这些场景中对我来说工作得很好，即:在进行样式更改后应用并删除一个虚拟类到主体:
$('body').addClass('dummyclass').removeClass('dummyclass');
这将迫使safari重新绘制。
以上建议对我没用。但是下面这个可以。
想动态更改锚内的文本。“搜索”这个词。创建一个带有id属性的内部标签“font”。使用javascript管理内容(如下)
Search
脚本内容:
var searchText = "Search";
var editSearchText = "Edit Search";
var currentSearchText = searchText;
function doSearch() {
if (currentSearchText == searchText) {
$('#pSearch').panel('close');
currentSearchText = editSearchText;
} else if (currentSearchText == editSearchText) {
$('#pSearch').panel('open');
currentSearchText = searchText;
}
$('#searchtxt').text(currentSearchText);
}
由于显示+偏移触发不适合我，我在这里找到了一个解决方案:
http://mir.aculo.us/2009/09/25/force-redraw-dom-technique-for-webkit-based-browsers/
i.e.
element.style.webkitTransform = 'scale(1)';
我发现@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
