我有一些简单的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做正确的事情?
我试着回答了更多的问题,但对我没用。
我有麻烦有相同的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
问题是你失去了焦点和滚动状态。
我不敢相信在2014年这仍然是一个问题。我在滚动页面时刷新页面左下角的固定位置标题框时就遇到了这个问题,标题会在屏幕上方“鬼影”。在尝试了以上所有的事情都没有成功之后,我注意到很多事情要么很慢/导致问题,因为创建非常短的DOM转播等,导致有点不自然的感觉滚动等…
我最终制作了一个固定的位置,全尺寸的div,带有pointer-events: none,并将danorton的答案应用于该元素,这似乎强制在整个屏幕上重绘,而不干扰DOM。
HTML:
<div id="redraw-fix"></div>
CSS:
div#redraw-fix {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 25;
pointer-events: none;
display: block;
}
JS:
sel = document.getElementById('redraw-fix');
sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='block';