Курсив не отображается в браузерах Safari на моем сайте, но подходит для Chrome и IE в Windows

Question

Я настраиваю свою тему, и я столкнулся с некоторыми кросс-браузерными проблемами, которые я не могу решить.Я попытался вставить нормализатор, и мне не повезло.

Везде, где на страницах моих продуктов есть курсив (в Safari с помощью планшета и iPhone), он отображается в виде пробела, а также в других браузерах (у меня есть ноутбук с Windows иAndroid-телефон и я использую Chrome,) все отображается нормально.

Это моя страница продукта

Я не уверен, как исправить это или даже проверить егоесли у меня нет продуктов Apple или денег на эти услуги виртуальной машины.

Как обстоят дела с кросс-браузерной совместимостью с пользовательским кодом?

Проблемная область находится в областях описания продукта под заголовком, в результате чего цена и описание отображаются в виде пробелов (я предполагаю, потому что они содержат курсив), а затем под областью образцов цвета. У меня есть дополнительный текстобласти, где на этих устройствах Apple в качестве пробела отображается только курсив, поэтому я поделюсь этим HTML-кодом, а также добавленным в эту тему CSS.

HTML (описание продукта):

    <p class="product-single__price product-single__price-product-template">

          <span class="visually-hidden">Regular price</span>
          <s id="ComparePrice-product-template" class="hide"></s>
          <span class="product-price__price product-price__price-product-template">
            <span id="ProductPrice-product-template" itemprop="price" content="60.0">
              $60.00
            </span>
            <span class="product-price__sale-label product-price__sale-label-product-template hide">Sale</span>
          </span>

      </p>

      <!--    Re-Arranging Product Page & Tabs    -->
      <p><span><strong>Petite Cherie Velvet Box</strong> from the collection Forever and Ever, is really unique and unforgettable! This flower arrangement will last up to 1 year guarantee (usually much longer). This is REAL highest quality preserved flowers. Their beauty and soft delicate touch and appearance make it impossible to differentiate from fresh cut flowers.</span></p>
<p><span>*** <em>Not all pictures correspond with the color of the box. Please ensure to select the color of the box from the drop down menu</em> ***</span></p>

HTML (дополнительные области текста):

<div class="product-single__description rte" itemprop="description">
      <div>
        <ul class="tabs">
          <li><a href="#tab-1" class="">Care Instructions</a></li>
          <li><a href="#tab-2" class="">Delivery &amp; Shipping</a></li>
          <li><a href="#tab-3" class="active">Returns &amp; Refunds</a></li>
        </ul>
        <div id="tab-1" style="display: none;">
          <p>Keep away from water and direct sunlight!</p>
<p>Your roses feel comfortable in their box. Please do not remove them.</p>
<p><i>We feel it is important to mention that all substances used in the preservation process are non-toxic, non-corrosive, non-carcinogenic. The solutions and colorants are the same as those used in food, and textile manufacturing, therefore, they do not represent any health or environmental risk.</i></p>
        </div>
        <div id="tab-2" style="display: none;">
        <p><i>Delivery is only available in the Los Angeles Area, for a flat rate of $25. For same day delivery please place your orders with us by 10:00am.</i></p>

<p>This item ships nationwide. Orders usually ship 24-48 hours within receiving the order.</p>

<p>We will do our best to deliver the product on your desired delivery date. Once your order is in the hands of the carrier we have no control over the delivery process and we recommend you choose a delivery date at least one day early to avoid disappointment.</p>
        </div>
        <div id="tab-3" style="display: block;">
<!--              -->
        <p>Please choose carefully as we will not be able to offer refund or exchange on any Holy Chic Flower Box due to simple change of mind.</p>

<p>All our arrangements are made to order.</p>
        </div>
      </div>
    </div>

Добавлено + настройка CSS:

    body {
      margin: 0;
      line-height: 1.8em;
    }

    body #canvas {
        background-color: #fff
    }

    #canvas {
        max-width: 1300px;
        min-width: 350px;
        margin: 0 auto;
    /*     padding: 100px 100px 0 */
        padding: 60px 100px 0;
    }

    #canvas {
        margin: 45px auto;
        border-style: solid;
        border-color: rgba(0, 0, 0, .1);
    }

    #canvas {
      border-width: 2px;
    }

    @media only screen and (max-width:1390px) {
      #canvas {
        margin: 45px auto;
        max-width: 1100px;
      }
    }

    @media only screen and (max-width:1024px) {
      #canvas {
            margin: 0px auto;
            border-width: 0px !important
        }
    }

    @media only screen and (max-width:767px) {
      #canvas {
            padding: 50px 50px 0
      }
    }

    @media only screen and (max-width:640px) {
      #canvas {
            padding: 0 17px
      }
    }

    #canvas header {
      background: #fff;
    }


    /*================ Nav Adjustments ================*/
    nav.border-bottom {
      border-bottom-color: transparent;
    }

    .site-nav {
      text-transform: uppercase;
      font-size: 14px;

      /*  Adding Gotham To Nav  */
      font-family: 'Gotham';
      font-weight: normal;
      font-style: normal;
    }

    .site-nav a {
      color: rgba(0,0,0,.5);
      border-bottom-width: 2px;
      border-bottom-color: transparent;
      border-bottom-style: solid;
      padding: 0;
      margin: 0 20px;
      line-height: 1.6em;
    }

    @media screen and (max-width: 1087px) and (min-width: 744px) {
        .site-nav a {
            padding: 0px 0px !important;
            margin: 0 15px;
            font-size: 12px !important;
        }
    }

    @media screen and (max-width: 845px) and (min-width: 744px) {
      .site-nav a{
        margin: 0 8px;
        padding: 0px 0px !important;
        font-size: 12px !important;
      }
    }

    .site-nav a:hover {
      color: #111;
      border-bottom-color: rgba(0,0,0,.1);
    }

    .page-divider {
      line-height: 1.6em;
      margin-top: -4.5em;
      margin-bottom: 4.6em;
      font-size: 14px;

      border-bottom-width: 2px;

      border-bottom: 2px solid rgba(0,0,0,.1);
    }

    @media screen and (max-width: 869px) {
      .page-divider {
        border-bottom: 2px solid transparent;
      }
    }

    .list--inline li {
      background: #fff;
    }

    @media screen and (min-width: 1087px) {
      .list--inline li {
        margin: 0 -2px;
      }
    }

    @media screen and (max-width: 648px) {
      .page-divider {
        display: none;
      }
    }

    /*================ Product Page ================*/
    .btn {
      background: #fff !important;
      border: 2px solid #7f7f7f !important;
      color: #7f7f7f !important;
    }
    .btn:hover, .btn:focus {
      background: #7f7f7f !important;
      color: #fff !important;
    }

    /*================ Adjustments ================*/
    .main-content {
      padding-top: 10px;
    }

    .search-header {
      display: none;
    }

    /*================ Tabs ================*/
    ul.tabs {
      border-bottom: 1px solid transparent !important;
      margin: 0px 0 10px !important;
    }

    ul.tabs li a {
      font-size: 15px !important;
      padding: 0 10px !important;
      color: #7f7f7f !important;
    }

    ul.tabs li a.active {
      top: -3px !important;
      padding-top: 2px !important;
      color: #4D4D4D !important;
    }

    @media screen and (max-width: 1390px) and (min-width: 1097px) {
      ul.tabs li a {
        font-size: 12px !important;
        padding: 0 7px !important;
      }
    }

    @media screen and (max-width: 1096px) and (min-width: 1025px) {
      ul.tabs li a {
        font-size: 11px !important;
        padding: 0 5px !important;
      }
    }

    @media screen and (max-width: 1024px) and (min-width: 985px) {
      ul.tabs li a {
        font-size: 12px !important;
        padding: 0 7px !important;
      }
    }


    @media screen and (max-width: 984px) {
      ul.tabs li {
        width: 100% !important;
        text-align: center !important;
      }
      ul.tabs li a {
        font-size: 15px !important;
        padding: 0 10px !important;
      }
    }

    /*================ Changing font================*/
    h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
      font-family: 'Gotham';
      font-weight: normal;
      font-style: normal;
    }

    body, p {
      font-family: 'Gotham';
      font-weight: normal;
      font-style: normal;
      color: #7f7f7f;
    }

    p {
      line-height: 1.8em;
      font-size: 17px;
    }

    a {
      color: #7f7f7f;
    }
    /*================ Responsive Adjustments ================*/
    @media screen and (max-width: 1024px) {
      .page-width {
        padding-left: 1px !important;
        padding-right: 1px !important;
      }

      body, html {
        background-color: #fff !important;
      }
    }

    @media screen and (min-width: 749px) {
      .mobile-nav {
        display: none;
      }
    }

    @media screen and (max-width: 1087px) and (min-width: 576px) {
      .medium-up--one-half {
        width: 50% !important;
      }

      /*  THUMBNAIL SOLUTION  */
      .medium-up--one-quarter {
        width: 25% !important;
      }
    }

    @media screen and (max-width: 575px) {
      .medium-up--one-half {
        width: 100% !important;
      }

      /*  PLUGIN RESP. ADJUSTMENT  */
      .swatch {
        margin: 1em 4px !important;
      }
    }

    /*================ Mobile Nav Touch Ups ================*/
    .mobile-nav-wrapper {
      background-color: #fff;
      text-align: center;
      left: 0;
    }

    .mobile-nav__item.border-bottom {
      border-bottom: 1px solid #fff;
    }

    .mobile-nav__link {
      color: rgba(0,0,0,0.5);
    }

    :focus {
      outline: transparent auto 1px;
    }

    .mobile-nav-wrapper::after {
      border-bottom: 1px solid #fff;
    }

    @media screen and (max-width: 1087px) and (min-width: 744px) {
      .site-nav {
        margin: 0 !important;
      }
    }

    /*================ Mobile Product Page Touch Ups ================*/
    .btn.thumbnails-slider__btn {
      background: #fff !important;
      color: #7f7f7f !important;
      border: 2px solid #fff !important;
    }

    /*================ Hero Img Touch Ups ================*/
    .box {
      background-color: #fff;
    }