The appearent fix was that you could refresh using the URL, by clicking in the urlbar and pressing enter the page would load this fine or hovering over the element that contained the unrendered text to trigger a render.
After a bit of searching i found the following snippet ( that i modified to work, and absolutely work in my situation as the snippet I found wasn't working in my case but i guess i'm just saying it wasn't me coming up with this brilliant solution. ) as whenever you would resize the window the font also seemed to be triggered to render correctly, that was one of the methods I was using often in the last couple of days to get my text to render.
// Chrome fix for repainting text
$('body').css('padding-left', '1px').promise().done(function() {
setTimeout(function() {
$('body').css('padding-left', '0px');
}, 10);
});
I need to mention that the snippet above is wrapped in document.ready(). It's a bit overkill to do a promise on css, however, I need this to work everytime without any failure and this is only a temporal bugfix; or at least. That's what I'm assuming as more people in similar situations are having the same results as sought their answer in either CSS or Javascript to fix it.
I've measured the performance before and after the fix, to me, the results were neglactable and not worth mentioning in this post. I still had pages that loaded around a solid 200-400ms so that little snippet didn't worry me in the least.
