2014-09-06 42 views
5

W Safari 7 na iOS i OSX mam pewne elementy, w których tekst jest przepełniony poziomo. Elementy te mają tekst asynchronicznie wypełniony przez Angular Translate. Wygląda na to, że Safari nie zdaje sobie sprawy, że treść zmienionego elementu nie powoduje ponownego renderowania; Zamiast tego pozwól, aby elementy podrzędne przepełniły się poziomo.Dlaczego safari poziomo wylewa tekst na niektóre elementy?

enter image description here

+4

@Soviut, czy możesz stworzyć jsfiddle lub przynajmniej podzielić się z nami CSS-em? – coma

+0

@Soviut masz na myśli, że zawartość jest dodana programowo? – ProllyGeek

+0

Tak, zawartość jest dodawana w czasie wykonywania przez dyrektywę translacji w kanciastym. Ładuje tłumaczenia z pliku json językowego, a następnie propaguje te tłumaczenia do dowolnego miejsca w szablonach. – Soviut

Odpowiedz

1

Wydaje się to repaint/przerysować problem, który został znany stało z układem Safari.

Można próbować to naprawić z kilkoma liniami JavaScript, który chcesz chcą wystrzelić jak tylko zawartość jest załadowany:

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

To powinno przerysować okno na granicach jego zawartość .

Zamień '#myElement' za pomocą ID lub selektora CSS klasy, aby otrzymać swój przycisk. Ustawienie docierania (w przeciwieństwie do "brak") zapobiega migotaniu elementu. Limit czasu zero-m, ustawiający wyświetlacz z powrotem na blok, jest tym, co faktycznie powoduje odmalowanie.

Mam nadzieję, że to pomoże.

+0

Już robię tę sztuczkę, używając dyrektywy w kanciastym. Jest to dość brzydkie. – Soviut

+0

Z skrzypcami mogłem rozwiązać ten problem. To byłaby ogromna pomoc. –

+0

Tutaj zacząłem od prawdziwej prostej makiety tutaj: http://jsfiddle.net/pq2asbhw/. Jeśli mógłbyś wprowadzić jakiekolwiek zmiany powodujące, że tak się stanie w Safari, z przyjemnością przedstawię inny wygląd. –