仅在 Safari 上错误地显示超出包含 div/paragraph 右边界的文本

Question

我们在 Safari 上遇到奇怪的行为，在 Mac 和 [=134 上都是如此=].

在 iPhone 7 和 iPhone 8 上检测到该问题。此外，它还依靠响应式设计模式在 macOS Sierra 上进行了复现。

正如您在以下代码片段中看到的，我们有一个非常经典的 Boostrap-3 row/col 层次结构。考虑到代码段中封闭 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 设备上代码显示 没有问题 ，您可以从以下屏幕截图中看到：

相反，在 Safari 上，Mac 和 iOS，出现呈现问题：如您在屏幕截图中所见，文本超出屏幕右边框：

从下面的截图可以看出，div.col, div.text-copy-01 p 边界计算正确。 Safari 上的计算大小与 Chrome 和 Firefox 上的大小完全相同。尽管这样，文本 "overflows" 仅在 Safari 上。

突出显示div.col:

突出显示div.text-copy-01:

突出显示p:

但是，如果我们 select 文本 （显然可以在 Safari 上为 Mac仅), 文本被正确地重新排列, 尽管一些字符仍然显示在 div.text-copy-01 和 p[=96= 的边界之外]：

我们已经尝试过同时使用百分比和固定宽度，但没有成功：文本一直显示在右侧其包含元素的边界。

这似乎是 Safari 特有的问题。另一位用户遇到了类似的问题 (Text outside div in Safari only)，但 建议的解决方案不适用于我们的案例。

这是一个已知问题吗？有什么办法可以规避吗？

Answer 1

我们找到了解决方法。通过使用检查器，我们意识到 浏览器会在每次受影响 div 的大小或内容更改 时正确地重新显示文本，此外还有已经提到的文本选择。不幸的是，它很脏，但它看起来是目前唯一可行的选择。

我们添加了 .redrawn class 到包含错误显示文本的 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中。我们看到有很多方法可以通过用户代理或功能检测来检测浏览器。但是，这不在问题范围内。

仅在 Safari 上错误地显示超出包含 div/paragraph 右边界的文本

Text wrongly displayed beyond the containing div/paragraph right boundary only on Safari

html

css

safari

mobile-safari

twitter-bootstrap-3