1

I am using AngularJS with angular-translate (pascalprecht). I am experiencing an issue, where translated text on a button element doesn't show up, until I scroll the button out of the current view and scroll back in or redraw the page in some other way (like toggling display: none). The translated text is in place though (checking through inspector - chrome dev tools).

This happens on Chrome, I couldn't replicate it on Firefox. Translations are loaded with staticFileLoader (local file). The translation on the element is added this way:

<button class="button large x-wide" type="submit">{{ "SUBMIT" | translate }}</button>

I tried swapping the button element with an anchor ('a') element, but the error persists.

wiherek
  • 1,923
  • 19
  • 25

1 Answers1

1

I searched a bit more, and it seems this isn't related to AngularJS, but more to webkit How can I force WebKit to redraw/repaint to propagate style changes?

from the answers listed I tried a few. I didn't want to toggle display: none (that helps though). I tried adding a z-index, but it didn't help.

What did it, was adding an empty style tag after the button:

<button class="button large x-wide" type="submit">{{ "SUBMIT" | translate }}</button>
<style></style>

the translation shows up after a few seconds. This is not optimal, but works.

Community
  • 1
  • 1
wiherek
  • 1,923
  • 19
  • 25