CSS :: после позиции, не обновляющейся в Safari

Question

У меня проблема с CSS в Safari. После изменения текста элемента 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/