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://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/