Svg在chrome和Firefox

Question

目前，我正在制作一页， 这里是： 的 http://milosznowicki.ml/seedmed/

我已经将它设置在服务器上，现在Firefox中的一切看起来都不错，但是我遇到了chrome的问题。 我正在尝试使用填充黑客进行响应式 svg 。

此外，这里有一些我的 svg 容器的小提琴（它似乎在这些浏览器中正常工作）。 https://jsfiddle.net/4egzxsb9/4/

    <div id='str' class='strategy container col-m8 col-s5'>
      <div class='container three-rows  col-s3 col-m3 row-12'>
        <div class='  col-s6 col-m12 center'>
          <div class='icon-2'>
            <iframe class='if' src='https://image.flaticon.com/icons/svg/126/126472.svg'>
            </iframe>
          </div>
        </div>
        <p id='desc' class='description col-s6 col-m12'>
          Endokrynologi
        </p>
      </div>
      <div class='container three-rows  col-s3 col-m3 row-12'>
        <div class='  col-s6 col-m12 center'>
          <div class='icon-2'>
            <iframe class='if' src='https://image.flaticon.com/icons/svg/126/126472.svg'>
            </iframe>
          </div>
        </div>
        <p id='desc' class='description col-s6 col-m12'>
          Ondoskopi
        </p>
      </div>
      <div class='container three-rows  col-s3 col-m3 row-12'>
        <div class='  col-s6 col-m12 center'>
          <div class='icon-2'>
            <iframe class='if' src='https://image.flaticon.com/icons/svg/126/126472.svg'>
            </iframe>
          </div>
        </div>
        <p id='desc' class='description col-s6 col-m12'>
          Weterynari
        </p>
      </div>
      <div class='container three-rows  col-s3 col-m3 row-12'>
        <div class='  col-s6 col-m12 center'>
          <div class='icon-2'>
            <iframe class='if' src='https://image.flaticon.com/icons/svg/126/126472.svg'>
            </iframe>
          </div>
        </div>
        <p id='desc' class='description col-s6 col-m12'>
          Onkologi
        </p>
      </div>
    </div>

这是我的CSS：

@media  (min-width:200px){
  .col-s6{
       flex-basis:50%
    }
 }
@media (min-width:768px){
 .container{
   flex-flow:row wrap;
 }
  .col-m12{
    flex-basis:100%
   }
  #str{
   flex-flow: nowrap;
  }
  #desc{
   margin-top: 20px;
   margin-left: 0;
 }
}
.container{
  display:flex;
  flex-flow:column nowrap;
}
.icon-2{
  width: 100px;
  height: 100px;
  position: relative;
  padding-top: 100%;
}
.if{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border:none;
 }
.three-rows{
  justify-content: center;
}
.description{
  text-align: center;
  margin-top: 20px;
}
.center{
  display: flex;
  justify-content: center;
}
.strategy{
  justify-content: center;
  align-items: center;
}
#desc{
  padding: 12px 0 12px 0;
}