Trisha Trisha - 1 month ago 6
CSS Question

display:flex - unwanted spacing on iOS devices

http://gardenviewcare.wpengine.com/

This is happening across the entire site. on iOS devices, it looks as if there is letter spacing between each letter, when there is none. Everything displays correctly across all other browsers, but isn't working correctly in Safari OR chrome on iOS devices.

Each letter is separated so that it can be animated (using anime.js).

I went through and made sure that all vendor prefixs have been added as well to help, and it did not.

What am I doing wrong here? How can I resolve the spacing issue around each letter?

How it looks on iOS devices:
how it looks on ios devices using safari AND chrome



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 Source

Since you have each letter in it's own div, the display assigned to those divs is inline and has a line-height set to it as well, this is causing the letters to look that way. If you're to give it a block level display, it should alleviate the issue.
I've removed the display and line-height from your live site and don't really see any changes, on both mobile and desktop views.
If you're wondering how I was able to mimic the device, I used browserstack.com

Here's the snippet in question:

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