CSS ::after position not updating in Safari

Question

I have a CSS problem in Safari. After changing the text of a html element the position of ::after does not update.

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

But works perfectly in Chrome and Firefox.

Any ideas why?

score 0 · Accepted Answer · edited May 23 '17 at 12:30

Seems to just be a bug in Safari. If you force a reflow it fixes itself.

E.g. based on a suggestion in 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");

The call to height() forces the browser to re-render the span after the style change (so that it can calculate the "new" height). Without it the updates are just rolled into one and nothing happens. You could achieve a similar effect using setTimeout(...) with a zero timeout.

Updated fiddle: http://jsfiddle.net/cpdmLnw7/4/

CSS ::after position not updating in Safari

1 Answers1