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


当前回答

以上建议对我没用。但是下面这个可以。

想动态更改锚内的文本。“搜索”这个词。创建一个带有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);
    }

其他回答

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

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

我们最近遇到了这个问题,并发现使用CSS中的translateZ将受影响的元素提升到复合层可以解决这个问题,而不需要额外的JavaScript。

.willnotrender { 
   transform: translateZ(0); 
}

由于这些绘画问题主要出现在Webkit/Blink中,而此修复主要针对Webkit/Blink,在某些情况下更可取。特别是因为公认的答案几乎肯定会导致回流和重涂,而不仅仅是重涂。

Webkit和Blink一直在努力提高渲染性能,而这些小故障是优化的副作用,目的是减少不必要的流程和油漆。CSS将会改变,或者其他后续的规范将是未来的解决方案,很可能。

还有其他实现复合层的方法,但这是最常见的。

我建议使用一种不那么粗鲁和更正式的方式强制回流:使用forceDOMReflowJS。在您的示例中,您的代码将如下所示。

sel = document.getElementById('my_id');
forceReflowJS( sel );
return false;

出于某种原因,我无法让danorton的答案工作,我可以看到它应该做什么,所以我稍微调整了一下:

$('#foo').css('display', 'none').height();
$('#foo').css('display', 'block');

这对我很有效。

我不敢相信在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';