自举网格-Safari将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放入列中，并且列会自动增长/缩小为正确的大小。但是在safari上，svg似乎表现得好像不在列中一样-列的宽度约为应有宽度的一半，从而导致图像与其旁边的标题重叠。

为什么仅在野生动物园中会发生这种情况，我该如何解决？

Safari： Chrome：

在所有屏幕尺寸的移动设备和桌面设备上，这种情况都会发生。它也发生在iOS上的移动Chrome上，但从未在台式机Chrome上发生