我有一些简单的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);
    }

其他回答

这对JS来说很好

sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='block';

但在Jquery中,特别是当你只能使用$(document)时。Ready并且由于任何特定原因不能绑定到对象的.load事件,下面将工作。

您需要获取对象/div的OUTER(MOST)容器,然后将其所有内容删除到一个变量中,然后重新添加它。 它将使所有在外部容器内所做的更改可见。

$(document).ready(function(){
    applyStyling(object);
    var node = $("div#body div.centerContainer form div.centerHorizontal").parent().parent();
    var content = node.html();
    node.html("");
    node.html(content);
}

我来到这里,因为我需要在修改css后重新绘制Chrome中的滚动条。

如果有人有同样的问题,我通过调用这个函数来解决它:

//Hack to force scroll redraw
function scrollReDraw() {
    $('body').css('overflow', 'hidden').height();
    $('body').css('overflow', 'auto');
}

这种方法不是最好的解决方案,但它可能适用于所有情况,隐藏和显示需要重绘的元素可以解决所有问题。

这是我使用它的小提琴:http://jsfiddle.net/promatik/wZwJz/18/

我发现,只是添加一个内容样式的元素强制它重新绘制,这应该是一个不同的值,每次你想要它重新绘制,而不需要在一个伪元素。

.selector {
    content: '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

我正在开发ionic html5应用程序,在少数屏幕上我有绝对定位元素,当在IOS设备(iPhone 4,5,6,6 +)上向上或向下滚动时,我有重绘错误。

尝试了许多解决方案,没有一个是有效的,只有这个解决了我的问题。

我使用css类。fixrepaint这些绝对位置的元素

.fixRepaint{
    transform: translateZ(0);
}

这已经解决了我的问题,它可能会帮助别人