CSS：：Safari中未更新的职位之后

Question

我在Safari中遇到了CSS问题。在更改html元素的文本后，以下位置不更新::after。

$('#view').text("Shorter text"); // does not update the position of the #view::after pseudo-element http://jsfiddle.net/cpdmLnw7/

但在Chrome和Firefox中工作得很好。

知道为什么吗？

Answer 1

似乎只是Safari的一个bug。如果强制再流，它会自行修复。

基于https://stackoverflow.com/a/3485654/1469259中的建议

    var span=$('#view');
    span.text("Changing text does not update").css("display","inline-block").height();
    span.css("display","inline");

对height()的调用迫使浏览器在样式更改后重新呈现跨度(以便它可以计算“新”高度)。没有它，更新就会被卷成一个，什么都不会发生。使用具有零超时的setTimeout(...)，您可以获得类似的效果。

更新小提琴：http://jsfiddle.net/cpdmLnw7/4/