Как решить эту проблему Safari для отображения текста полностью оправдано? - PullRequest
Новая
       7

Как решить эту проблему Safari для отображения текста полностью оправдано?

0 голосов
/ 23 мая 2019

У меня проблема с отображением текста, возникающая в браузерах Safari для операционных систем MacOS / iOS. Текст отображается некорректно, пока текст не будет выделен / отменен.

Текст перед любым взаимодействием с браузером: enter image description here

Во время выбора: enter image description here

После того, как выделение «исправило» текст: enter image description here

Другие браузеры и ОС отображаются правильно при загрузке страницы.

Используя BrowserStack, я протестировал несколько версий Safari. Пока я не протестировал Safari 6.2, он отображался правильно.

Я не уверен в том, что является причиной или каково решение.

Веб-страница представляет собой Angular 5 SPA.

Ссылка на анимированный GIF 

.newline-to-br {
    white-space: pre-line;
}
<p _ngcontent-c27="" class="newline-to-br">Kids under 10 free. 
If fishing during hunting season, we would recommend wearing blaze orange for safety purposes. </p>

1 Ответ

1 голос
/ 23 мая 2019

В Safari вы не можете иметь пробел в самом конце блока текста. Пространство на самом деле добавляется, но выделение может идти дальше последнего пробела, поэтому оно оборачивается и оправдывается. Нажатие или выделение текста вызывает перерисовку, которая интерпретирует пространство и корректно выравнивает его. Чтобы исправить это, удалите последний пробел перед </p>. 

<p _ngcontent-c27="" class="newline-to-br">Kids under 10 free. 
If fishing during hunting season, we would recommend wearing blaze orange for safety purposes.</p>
...