'Nested div is not respecting border on safari 9 only

I am using flex to separate some divs horizontally and it looks fine in every other browser including IE, but for some reason it is not working on Safari. I am using Safari 9.0.3 on El Capitan. Below is a code.

HTML

<div class="grid-box">
 <div class="display-price">
  <div class="saleprice-wrap">
   <div id="saleprice">
    <span style="color: rgb(51, 51, 51);">$4.49</span>
   </div>
  </div>
  <div id="sellprice" style="display: none;">$4.49</div>
 </div>
 <div class="info-wrapper">
  <div class="type">Vinyl Sticker</div>
  <div class="stock-status">
   <div>
    <h5>In stock</h5>
   </div>
  </div>
 </div>
 <div class="qty-wrapper">
  <div class="form-qty">
   <span class="label">Quantity:</span>
   <input id="input_qty" type="tel" maxlength="3" class="textinput" value="1">
  </div>
  <div class="a2c">
   <a id="" rel="nofollow" title="Add to Cart" class="" style="display: block;">Add to Cart</a>
  </div>
 </div>
</div>

CSS

.grid-box{
  padding: 12px 30px;
  margin: 0;
  background: #add8e6;
  display: flex;
  z-index: 1
}

.display-price{
  padding: 20px 15px 20px 0;
  border-right: solid 1px #999;
  align-self: center;
  text-align: center
 }

.saleprice-wrap, #sellprice {
  display: inline-block;
  font-size: 1.6em
}

#saleprice span{
  font-size: 1.6em;
  margin-right: 2px
}

.info-wrapper{
  align-self: center;
  width: 100%;
  padding-left: 20px
}

.qty-wrapper{
  margin-bottom: .5em;
  text-align: center;
  padding-left: 10px
}

.form-qty{
  display: inline-block;
  font-size: 15px;
  margin-bottom: 10px
}

.a2c{
  width: 160px;
  display: inline-block
}

Here is the codepen as well http://codepen.io/sinake/full/mPMzzm/

When loading the pen in chrome, firefox, or IE the price is shown correctly with the border to the right but in Safari or other iOS devices the price overlaps the border. I have tried playing around with the display etc but to no avail. Any ideas? Thanks in advance.

ioscsssafariflexbox


Solution 1:[1]

Safari has updated over the years since this question was asked. I just checked the codepen link in Safari 13 and the issue is no longer happening. Closing this out.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 sinake

Related Questions