Angular Materials Flex-box not being displayed properly on iOS Safari
<p>I am trying to add a feature which displays 4 material-design cards side-by-side. It works perfectly fine on all the other browsers except safari/ios. The markup is as follows.</p>

<pre><code>     &lt;div layout="row" layout-sm="column" layout-xs="column" layout-align="space-around start" layout-align-sm="center stretch" layout-align-xs="center stretch" &gt;

    &lt;div flex="grow" flex-sm="grow" flex-xs="grow" layout="row" layout-xs="row" layout-align="space-around start" layout-align-xs="center stretch"&gt;
        &lt;md-card flex="grow" layout="row" layout-align="center center" flex-gt-sm="50"  class="selling-points-card"  &gt;
            &lt;div  class="selling-points-picture" &gt;
                &lt;img src="http://placehold.it/50x50"&gt;
            &lt;span  class="selling-points-text"&gt;Free Service Included&lt;/span&gt;        
            &lt;/div&gt;
        &lt;/md-card&gt;

        &lt;md-card flex="grow" layout="row" layout-align="center center" flex-gt-sm="50"  class="selling-points-card"  &gt;
            &lt;div  class="selling-points-picture" &gt;
                &lt;img src="http://placehold.it/50x50"&gt;
            &lt;span  class="selling-points-text"&gt;30 Day Money back guarentee&lt;/span&gt;        
            &lt;/div&gt;
        &lt;/md-card&gt;
    &lt;/div&gt;

    &lt;div flex="grow" flex-sm="grow" flex-xs="grow" layout="row" layout-xs="row" layout-align="space-around start" layout-align-xs="center stretch"&gt;
        &lt;md-card flex="grow" layout="row" layout-align="center center" flex-gt-sm="50"  class="selling-points-card"  &gt;
            &lt;div  class="selling-points-picture" &gt;
                &lt;img src="http://placehold.it/50x50"&gt;
            &lt;span  class="selling-points-text"&gt;90 Day Warranty&lt;/span&gt;        
            &lt;/div&gt;
        &lt;/md-card&gt;
        &lt;md-card flex="grow" layout="row" layout-align="center center" flex-gt-sm="50"  class="selling-points-card"  &gt;
            &lt;div  class="selling-points-picture" &gt;
                &lt;img src="http://placehold.it/50x50"&gt;
            &lt;span  class="selling-points-text"&gt;FreedomPop Certified&lt;/span&gt;        
            &lt;/div&gt;
        &lt;/md-card&gt;
    &lt;/div&gt;

    &lt;/div&gt;
**css rules**
.selling-points-card{
position:relative; 
display:inline-block;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
.selling-points-picture {
    display:inline-block; 
    padding:5px;
};
.selling-points-text{
    position:absolute; 
    top:40%; left:30%; 
    font-weight:500; 
    font-size:12px; 
    letter-spacing: 0.020em;
};
</code></pre>

<p>}</p>

<p>This is how it looks like on most browsers.
<a href="https://i.imgur.com/JFWBb5T.png" rel="nofollow">https://i.imgur.com/JFWBb5T.png</a></p>

<p>However on the iPhone simulator those 4 cards get cut off by search results.
<a href="https://i.imgur.com/dYyCVGa.png" rel="nofollow">https://i.imgur.com/dYyCVGa.png</a></p>

<p>Does anyone know what I could be missing? 
And another question...is there a right way to format the span text so that it is centered in the middle of its parent card?</p>