In Safari 7 su iOS e OSX ho alcuni elementi in cui il testo sta straripando orizzontalmente. Questi elementi hanno il loro testo popolato da Angular Translate in modo asincrono. Sembra che Safari non si renda conto che il contenuto dell'elemento modificato non viene ri-renderlo; Invece lasciare che gli elementi del bambino trabocchino orizzontalmente.Perché Safari riversa orizzontalmente il testo su determinati elementi?
Questo mi sembra un ridisegno/ridisegnare problema che è stato conosciuto per accadere con il layout Safari.
È possibile tentare di risolvere questo problema con un paio di righe di JavaScript che ci si vuole sparare non appena il contenuto viene caricato:
var sel = document.querySelector('#myElement')
sel.style.display = 'run-in';
setTimeout(function() { sel.style.display = 'block'; }, 0);
Questo dovrebbe ridisegnare la casella per i limiti del suo contenuto .
Sostituisci '#myElement' con il selettore ID o classe CSS per ottenere il tuo pulsante. L'impostazione di run-in (al contrario di "none") impedisce allo sfarfallio dell'elemento. Il timeout dello zero-ms che riporta il display al blocco è ciò che effettivamente causa il repaint.
Spero che questo aiuti.
Sto già facendo questo trucco usando una direttiva angolare. È piuttosto brutto però. – Soviut
Con un violino potrei risolvere questo. Sarebbe un grande aiuto. –
Qui, ho iniziato con un semplice mockup reale qui: http://jsfiddle.net/pq2asbhw/. Se potessi fare in modo che le modifiche si stiano verificando in Safari, sarò felice di dargli un'altra occhiata. –
@Soviut, potresti creare un jsfiddle o almeno condividere il CSS con noi? – coma
@Soviut vuoi dire che il contenuto è aggiunto programmaticamente ?? – ProllyGeek
Sì, il contenuto viene aggiunto in fase di runtime da una direttiva di traduzione in angolare. Carica le traduzioni da un file json di lingua e quindi diffonde tali traduzioni ovunque siano necessarie nei modelli. – Soviut