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中的一个错误。如果你强制回流，它会自行修复。

E.g.根据建议，在https://*.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/