5

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.

enter image description here

Soviut
  • 88,194
  • 49
  • 192
  • 260
  • 4
    @Soviut, Could you craft a jsfiddle or at least share the CSS with us? – coma Sep 11 '14 at 21:22
  • @Soviut do you mean that the content is added programatically ?? – ProllyGeek Sep 12 '14 at 22:25
  • Yes, the content is added at runtime by a translation directive in angular. It loads the translations from a language json file then propagates those translations to anywhere they're needed in the templates. – Soviut Sep 13 '14 at 07:38
  • The issue seems to be some combination of inline block elements mixed with other display types. – Soviut Sep 13 '14 at 07:39
  • 5
    please share example, for make us able to test it – Narek Mamikonyan Sep 13 '14 at 08:18
  • @Soviut does this issue happen in ios safari only ? and please past e the element css. – ProllyGeek Sep 14 '14 at 01:28
  • @ProllyGeek yes, it's occurring in both iOS Safari 7 and OSX Safari 7. – Soviut Sep 14 '14 at 05:17
  • 6
    no code, no way to test, nothing? Is people supposed to guess what your code is? You're a seasoned SO user, you should know better, this isn't the way to make a question at SO by ANY MEANS. I'm surprised it's still open, TBH. Also, no matter your bounty, any given answer should be a comment since you didn't provide any single bit of information, just an image which could be anything, thus it's impossible to provide nothing but a guess, hence a comment – Devin Sep 15 '14 at 03:39
  • @Fabio I've actually been struggling to isolate the issue in a fiddle without success. I was hoping there was a slim chance others had run into the issue and might recognize it. – Soviut Sep 15 '14 at 14:15
  • Disable any and all CSS3 transforms applied to any of the parent elements in your chain and test again. – zrooda Sep 15 '14 at 15:41

1 Answers1

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.

Josh Burgess
  • 9,327
  • 33
  • 46
  • I'm already doing this trick using a directive in angular. It's pretty ugly though. – Soviut Sep 16 '14 at 17:42
  • With a fiddle I could solve this. It'd be a huge help. – Josh Burgess Sep 16 '14 at 19:35
  • Here, I started with a real simple mockup here: http://jsfiddle.net/pq2asbhw/. If you could make whatever changes are triggering this to happen in Safari I'll be happy to give it another look. – Josh Burgess Sep 16 '14 at 19:48
  • Not the outcome I was hoping for since this was my existing hack solution but I wasn't able to reproduce the problem in isolation in JSFiddle. Hopefully this just disappears in Safari 8. – Soviut Sep 18 '14 at 06:19