我有一些简单的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做正确的事情?


当前回答

一个简单的解决方案与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上正确渲染。

其他回答

工作如下。在纯CSS中只需要设置一次。而且它比JS函数更可靠。性能似乎不受影响。

@-webkit-keyframes androidBugfix {from { padding: 0; } to { padding: 0; }}
body { -webkit-animation: androidBugfix infinite 1s; }

我试着回答了更多的问题,但对我没用。 我有麻烦有相同的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

问题是你失去了焦点和滚动状态。

设置转换CSS的比例(0.9999)显然工作在最新的chrome。

function redraw(node){
     // Adjust the 200 as fastest as you can
     // or, change the setTimeout to requestAnimationFrame as soon as the element
     // is drawn
     setTimeout(() => (node.style.transform = "scale(0.9999)"), 200);
}

并不是说这个问题需要另一个答案,而是我发现,在我的特定情况下,仅仅改变一点颜色就会迫使我重新绘制。

//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被证明是将第二个样式更改移到当前事件循环之外的关键。

我有这个问题的一个数量的div被插入到另一个div的位置:绝对,插入的divs没有位置属性。当我把这个位置:相对,它工作得很好。(真的很难找到问题所在)

在我的例子中,Angular使用ng-repeat插入元素。