Bootstrap grid - сафари помещает svg вне столбца, chrome помещает его внутрь

Question

У меня есть следующие настройки bootstrap4:

  <div className="container-fluid headerContainer">
    <div className="row h-100 align-items-center">
      <div className="col h-100 headerSitenameWrapper">
        <Link to="/">
          <div className="row h-100">
            <div className="col-auto text-center">
              <img className="img headerLogo" src=foo.svg alt="Logo" />
            </div>
            <div className="col text-left align-self-center align-middle headerSitename">
              Green
            </div>
          </div>
        </Link>
      </div>
  </div>

Изображение, о котором идет речь, является SVG, с высотой, установленной на 100%.Странно то, что Chrome помещает svg в столбец, и столбец автоматически увеличивается / уменьшается до нужного размера.В сафари, однако, svg ведет себя так, как будто его нет в столбце - столбец примерно вдвое меньше ширины, поэтому изображение перекрывается с заголовком рядом с ним.

Почемуэто происходит только в сафари, и как мне это исправить?

Safari: Chrome:

NB это происходитна мобильных и настольных сафари на всех размерах экрана.Это также происходит на мобильном Chrome на iOS, но никогда на настольном Chrome