Why does safari horizontally spill text on certain elements?

Question

In Safari 7 on iOS and OSX I have certain elements in which the text is overflowing horizontally. These elements have their text populated by Angular Translate asynchronously. It looks as if Safari doesn't realize the content of the element changed isn't re-rendering it; Instead letting child elements overflow horizontally.

Answer 1

This seems like a repaint/redraw issue that's been known to happen with Safari layout.

You can attempt to fix this with a couple lines of JavaScript that you'd want to fire off as soon as the content is loaded:

var sel = document.querySelector('#myElement') 
sel.style.display = 'run-in'; 
setTimeout(function () { sel.style.display = 'block'; }, 0);

That should redraw the box to the bounds of its contents.

Replace '#myElement' with the ID or class CSS selector to get your button. The run-in (as opposed to 'none') setting prevents the element from flickering. The zero-ms timeout setting the display back to block is what actually causes the repaint to occur.

Hope this helps.