仅在Safari

Question

我们在 Mac 和 iPhone 上的 Safari 上遇到了奇怪的行为。

在 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 设备上，代码显示为没有问题，如您所见从以下屏幕截图中：

---

相反，在 Mac 和 iOS 上的 Safari 上，出现渲染问题：您可以在屏幕截图中看到，文本超出了屏幕的右边框：

从以下屏幕截图中可以看到， div.col ， div.text-copy-01 和 p 边界是正确的计算的。 Safari上的计算大小与Chrome和Firefox上的大小完全相同。尽管如此，文本仅在Safari上“溢出”。

1. 突出显示的 div.col ：

1. 突出显示的 div.text-copy-01 ：

1. 突出显示的 p ：

---

但是，如果我们选择文本（显然只能在 Safari for Mac 上完成），尽管某些字符仍然显示超出 div.text-copy-01 和 p 的边界：

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

这似乎是Safari特有的问题。另一个用户有类似的问题（Text outside div in Safari only），但是建议的解决方案不适用于我们的情况。

这是一个众所周知的问题吗？有什么办法可以规避它？

Answer 1

我们找到了解决方法。通过与检查员一起玩耍，我们认识到，除了已经提到的文本选择之外，每次受影响的div的大小或内容更改时，浏览器都会正确地重新显示文本。不幸的是，它很脏，但是到目前为止，它似乎是唯一可行的选择。

我们向div中添加了一个 .redrawn 类，其中包含错误显示的文本。例如：

<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);
  });
});

这样，我们可以将变通办法应用于可能受到该错误影响的每段文本。为了减少影响，我们还将限制只在Safari中执行此JS。我们看到，有很多方法可以通过用户代理或功能检测来检测浏览器。但是，这超出了问题的范围。