Текст, неправильно отображаемый за правой границей содержащего элемента div / абзаца только в Safari - PullRequest
Новая
       78

Текст, неправильно отображаемый за правой границей содержащего элемента div / абзаца только в Safari

0 голосов
/ 03 сентября 2018

Мы наблюдаем странное поведение на Safari , как на Mac , так и на iPhone .

Проблема обнаружена на iPhone 7 и iPhone 8 . Более того, он воспроизводился также на macOS Sierra , полагаясь на режим адаптивного дизайна.

Как вы можете видеть в следующем фрагменте, мы имеем довольно классическую иерархию строк / столбцов Boostrap-3. Учтите, что родительский элемент включающего div во фрагменте является элементом body . 

<div class="container-wrapper" id="content-wrapper" style="padding: 80px 0px 0px;">
  <!-- OTHER STUFF -->
  <div class="whats-on-hotel">
    <div class="container">
      <h2 class="section-name section-name-space text-center">what's on at the hotel</h2>
      <div class="row">
        <div class="col-sm-6">
          <img class="img-responsive" src="/.imaging/bhr-wide-small-jpg/dam/SHANGHAI/what-s-on/what-s-on-opening-shanghai.jpg/jcr%3Acontent" title="La Terrazza of The Bvlgari Hotel Shanghai" alt="La Terrazza of The Bvlgari Hotel Shanghai">
        </div>
        <div class="col-sm-6">
          <h3 class="article-title article-title-space first-space">The Bvlgari Hotel Shanghai, the new contemporary glamourous address in China’s most fashionable city, opened its doors</h3>
          <div class="text-copy-01 text-copy-space">
            <p>The Bvlgari Hotel Shanghai has taken its place in the Bvlgari Hotels &amp; Resorts collection.</p>

            <p>On 19th June, the new Bvlgari Hotel Shanghai hosted the launch of Bvlgari Film Week, part of the Shanghai International Film Festival, thereby making its debut as the sixth jewel in the Bvlgari Hotels universe. Bridging the golden age of Shanghai
              with its ...</p>
          </div>
          <a class="link-button btn btn-default" href="http://www.bulgarihotels.com/en_US/london/whats-on/article/London/At-The-Hotel/The-Bvlgari-Hotel-Shanghai,-the-new-contemporary-glamourous-address-in-China’s-most-fashionable-city,-opened-its-doors">Read more</a>
        </div>
      </div>
    </div>
  </div>
  <!-- OTHER STUFF -->

</div>

На Chrome , Firefox и Android устройствах код отображается с без проблем , как вы можете видеть на следующем скриншоте : Chrome - no issues

Вместо этого на Safari , как на Mac , так и iOS , возникает проблема рендеринга : как вы можете видеть на скриншоте текст выходит за правую границу экрана:

Safari - overflowing text

Как видно из следующих снимков экрана, границы div.col , div.text-copy-01 и p рассчитаны правильно. Расчетный размер в Safari точно такой же, как в Chrome и Firefox. Хотя этот текст «переполняется» только в Safari.

  1. выделено div.col :

enter image description here

  1. выделено div.text-copy-01 :

enter image description here

  1. выделено p :

enter image description here

Однако, если мы выделим текст (очевидно, это можно сделать только на Safari для Mac ), текст будет правильно переставлен, хотя некоторые символы по-прежнему будут отображаться за границей. div.text-copy-01 и p : enter image description here

Мы уже пытались играть как с процентами, так и с фиксированной шириной , с безуспешно : текст продолжает отображаться за правой границей содержащих его элементов.

Кажется, это проблема Safari. У другого пользователя была похожая проблема ( Текст вне div только в Safari ), но предлагаемое решение не применимо к нашему случаю .

Это уже известная проблема? Есть ли способ обойти это?

1 Ответ

0 голосов
/ 04 сентября 2018

Нам удалось найти обходной путь . Поиграв с инспектором, мы поняли, что браузер корректно отображал текст каждый раз, когда размер или содержимое затронутого div менялось , в дополнение к уже упомянутому выделению текста. К сожалению, он довольно грязный, но на данный момент выглядит как единственный работающий вариант.

Мы добавили класс .redrawn к элементам div, содержащим неправильно отображаемый текст. Например: 

<div class="text-copy-01 text-copy-space redrawn">
  <p>The Bvlgari Hotel Shanghai has taken its place in the Bvlgari Hotels &amp; Resorts collection.</p>
  <p>On 19th June, the new Bvlgari Hotel Shanghai hosted the launch of Bvlgari Film Week, part of the Shanghai International Film Festival, thereby making its debut as the sixth jewel in the Bvlgari Hotels universe. Bridging the golden age of Shanghai with
    its ...</p>
</div>

Затем мы очищаем и повторно добавляем содержащиеся HTML : 

$(document).ready(function() {
  $(".redrawn").each(function(index, elementToRedraw) {
    var $elementToRedraw = $(elementToRedraw);
    var html = $elementToRedraw.html();
    $elementToRedraw.html("");
    $elementToRedraw.html(html);
  });
});

Таким образом, мы можем применить обходной путь к каждому фрагменту текста, на который может повлиять ошибка. Чтобы уменьшить влияние, мы также ограничим выполнение этого фрагмента JS только Safari. Мы видим, что существует множество способов обнаружить браузер, либо с помощью агента пользователя, либо с помощью функции обнаружения. Однако это выходит за рамки вопроса.

...