html - 显示 :flex - unwanted spacing on iOS devices

Question

http://gardenviewcare.wpengine.com/

整个站点都在发生这种情况。在 iOS 设备上，看起来每个字母之间都有字母间距，但实际上没有。一切在所有其他浏览器上都能正确显示，但在 Safari 或 iOS 设备上的 chrome 中无法正常工作。

每个字母都是分开的，以便可以设置动画(使用 anime.js )。

我仔细检查并确保所有供应商前缀也已添加以提供帮助，但事实并非如此。

我在这里做错了什么？如何解决每个字母周围的间距问题？

它在 iOS 设备上的外观:

  var opac = anime({
    targets: '.letter',
    opacity: 1,
    scale: 1,
    easing: 'easeInBounce',
    delay: function (el, index) {
      return index * 50;
    },
    direction: 'normal',
    loop: false,
    duration: function (el, i, l) {
      return 80 + (i, l * 50);
    },
  });

  var locations = anime({
    targets: '.locations',
    direction: 'normal',
    opacity: 1,
    loop: false,
    delay: function (el, l) {
      return 450 + (el, l * 500);
    },
    duration: function (el, l) {
      return 80 + (el, l * 150);
    },
  });
  var locationsbuttons = anime({
    targets: '.locations, .buttons,  .locations span',
    translateY: 30,
    direction: 'normal',
    opacity: 1,
    loop: false,
    delay: function (el, l) {
      return 3850 + (el, l * 300);
    },
    elasticity: function (el, i, l) {
      return 200 + (i, l * 500);
    },
  });

.name .word {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: auto;
  padding: 0 1rem 1rem;
  position: relative;
  font-size: 56px;
  font-family: "proxima-nova", sans-serif;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: 300;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.name.big {
  font-size: 42px;
  padding: 0 1rem 1.5rem;
}

.name .letter {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  opacity: 0;
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
      transform: scale(0.9);
  line-height: 1em;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.fat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: 500;
}

    <link href="http://gardenviewcare.wpengine.com/wp-content/themes/Divi-child-01/style.css" rel="stylesheet" />
    <link href="http://gardenviewcare.wpengine.com/wp-content/themes/Divi/style.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/1.0.0/anime.min.js"></script>

<div class="name big">
  <div class="word">
    <div class="fat">
      <div class="letter">M</div>
      <div class="letter">e</div>
      <div class="letter">m</div>
      <div class="letter">o</div>
      <div class="letter">r</div>
      <div class="letter">i</div>
      <div class="letter">e</div>
      <div class="letter">s</div>
    </div>
  </div>
  <div class="word">
    <div class="letter">&nbsp;</div>
    <div class="letter">m</div>
    <div class="letter">a</div>
    <div class="letter">y</div>
  </div>
  <div class="word">
    <div class="letter">&nbsp;</div>
    <div class="letter">f</div>
    <div class="letter">a</div>
    <div class="letter">d</div>
    <div class="letter">e</div>
    <div class="letter">,</div>
  </div>
</div>
<div class="name">
  <div class="word">
    <div class="letter">&nbsp;</div>
    <div class="letter">b</div>
    <div class="letter">u</div>
    <div class="letter">t</div>
  </div>
  <div class="word">
    <div class="letter">&nbsp;</div>
    <div class="letter">t</div>
    <div class="letter">h</div>
    <div class="letter">e</div>
    <div class="letter">y</div>
  </div>
  <div class="word">
    <div class="letter">&nbsp;</div>
    <div class="letter">l</div>
    <div class="letter">i</div>
    <div class="letter">v</div>
    <div class="letter">e</div>
  </div>
  <div class="word">
    <div class="letter">&nbsp;</div>
    <div class="letter">i</div>
    <div class="letter">n</div>
  </div>
  <div class="word">
    <div class="letter">&nbsp;</div>
    <div class="letter">o</div>
    <div class="letter">u</div>
    <div class="letter">r</div>
  </div>
  <div class="word">
    <div class="letter">&nbsp;</div>
    <div class="letter">h</div>
    <div class="letter">e</div>
    <div class="letter">a</div>
    <div class="letter">r</div>
    <div class="letter">t</div>
    <div class="letter">s</div>
    <div class="letter">&nbsp;</div>
  </div>
  <div class="word">
    <div class="fat">
      <div class="letter">f</div>
      <div class="letter">o</div>
      <div class="letter">r</div>
      <div class="letter">e</div>
      <div class="letter">v</div>
      <div class="letter">e</div>
      <div class="letter">r</div>
      <div class="letter">.</div>
    </div>
  </div>
</div>
<div class="locations"><a class="buttons" href="/chesterfield/">Chesterfield</a><span>(636) 489-4116</span><a class="buttons" href="/dougherty-ferry/">Dougherty Ferry</a><span>(636) 923-8693</span><a class="buttons" href="/ofallon/">O'Fallon</a><span>(636) 542-4302</span></div>

Answer 1

因为每个字母都在它自己的 div 中，分配给这些 div 的显示是内联的，并且还设置了行高，这导致字母看起来那样。如果你要给它一个 block 级显示，它应该可以缓解这个问题。
我已经从您的实时网站中删除了显示和行高，并且在移动和桌面 View 中都没有真正看到任何变化。
如果您想知道我是如何模仿该设备的，我使用了 browserstack.com

这是有问题的片段:

body .name .letter {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    /* opacity: 0; */
    /* -webkit-transform: scale(0.9); */
    -ms-transform: scale(0.9);
    transform: scale(0.9);
    line-height: 1em;
    /* -webkit-box-align: center; */
    -ms-flex-align: center;
}