Anzeige: flex - unerwünschter Abstand auf iOS-Geräten

Question

http://gardenviewcare.wpengine.com/

Dies wird auf der gesamten Website passiert. Auf iOS-Geräten sieht es so aus, als ob zwischen jedem Buchstaben ein Abstand zwischen den Buchstaben besteht, wenn keiner vorhanden ist. Alles wird in allen anderen Browsern korrekt angezeigt, funktioniert jedoch nicht ordnungsgemäß in Safari ODER Chrome auf iOS-Geräten.

Jeder Buchstabe ist getrennt, so dass er animiert werden kann (mit anime.js).

Ich ging durch und stellte sicher, dass alle Vendor-Präfixe hinzugefügt wurden, um zu helfen, und es tat es nicht.

Was mache ich hier falsch? Wie kann ich das Abstandsproblem um jeden Buchstaben lösen?

Wie es auf iOS-Geräten aussieht:

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

Da Sie jeden Buchstaben haben in einem eigenen div, die auf diese divs zugewiesen Anzeige ist inline und hat eine line-height Stellen Sie sich auch darauf ein, dass die Buchstaben so aussehen. Wenn Sie es auf Blockebene anzeigen, sollte das Problem gemildert werden.
Ich habe die Anzeige und die Zeilenhöhe von Ihrer Live-Site entfernt und sehe keine Änderungen sowohl auf der Mobil- als auch auf der Desktop-Seite.
Wenn Sie sich fragen, wie ich in der Lage war, das Gerät zu imitieren, benutzen ich browserstack.com

Hier ist der Code-Schnipsel in Frage:

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