我有一些简单的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做正确的事情?
当前回答
并不是说这个问题需要另一个答案，而是我发现，在我的特定情况下，仅仅改变一点颜色就会迫使我重新绘制。
//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被证明是将第二个样式更改移到当前事件循环之外的关键。
其他回答
我试着回答了更多的问题，但对我没用。 我有麻烦有相同的clientWidth与safari与其他浏览器相比，这段代码解决了这个问题:
var get_safe_value = function(elm,callback){
var sty = elm.style
sty.transform = "translateZ(1px)";
var ret = callback(elm)//you can get here the value you want
sty.transform = "";
return ret
}
// for safari to have the good clientWidth
var $fBody = document.body //the element you need to fix
var clientW = get_safe_value($fBody,function(elm){return $fBody.clientWidth})
这真的很奇怪，因为如果我尝试在get_safe_value之后再次获得clientWidth，我用safari获得了一个坏值，getter必须在sty之间。transform = "translateZ(1px)"; 和猪圈。Transform = "";
另一个肯定有效的解决方法是
var $fBody = document.body //the element you need to fix
$fBody.style.display = 'none';
var temp = $.body.offsetHeight;
$fBody.style.display = ""
temp = $.body.offsetHeight;
var clientW = $fBody.clientWidth
问题是你失去了焦点和滚动状态。
这将强制重绘，同时避免闪烁，现有的元素修补和任何布局问题…
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());
});
}
我建议使用一种不那么粗鲁和更正式的方式强制回流:使用forceDOMReflowJS。在您的示例中，您的代码将如下所示。
sel = document.getElementById('my_id');
forceReflowJS( sel );
return false;
我想补充的是，现在需要在父节点上设置样式。
sel.parentNode.style.display = 'none';
sel.parentNode.offsetHeight;
sel.parentNode.style.display = '';
在当前版本的Safari(15.6)中，这是唯一适用于我的解决方案。
丹诺顿方案对我不起作用。我有一些非常奇怪的问题，webkit不会画一些元素在所有;输入中的文本直到onblur才更新;并且改变className不会导致重绘。
我偶然发现，我的解决方案是在脚本之后向正文添加一个空的样式元素。
<body>
...
<script>doSomethingThatWebkitWillMessUp();</script>
<style></style>
...
这就解决了问题。这有多奇怪?希望这对某些人有所帮助。
