使用z-index堆叠div不能处理动画gif

Question

我在带边框的圆形div中有一个透明的动画gif。在iOS设备上，包括Mac，gif的透明背景会占用周围div的边框（见图）

我试过给封闭的div提供比gif更高的z-index，但它仍然不起作用。我怎样才能克服这个问题？这在Apple最近的iOS更新之前运行良好。

＆＃13;

＆＃13;

.ico-btn {
background-color: rgba(0, 0, 0, 0);
border-bottom-color: rgb(26, 188, 156);
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-style: solid;
border-bottom-width: 10px;
border-left-color: rgb(26, 188, 156);
border-left-style: solid;
border-left-width: 10px;
border-right-color: rgb(26, 188, 156);
border-right-style: solid;
border-right-width: 10px;
border-top-color: rgb(26, 188, 156);
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-top-style: solid;
border-top-width: 10px;
box-shadow: none;
color: rgb(26, 188, 156);
display: block;
font-size: 80px;
font-weight: 900;
height: 40px;
line-height: 0px;
margin-bottom: 0px;
margin-left: 15px;
margin-right: 15px;
margin-top: 0px;
min-width: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 30px;
text-align: center;
transition-delay: 0s;
transition-duration: 0.07s;
transition-property: transform;
transition-timing-function: ease-out;
white-space: nowrap;
width: 70px;
z-index: auto;}

.refresh-img { height: 60px;
margin-top: -25px;}

＆＃13;

<div style="background:black">
     <div class="ico-btn">
          
          <img id="btn-refresh-loader" src="http://gifimage.net/wp-content/uploads/2017/08/loading-gif-transparent-4.gif" class="refresh-img">
      </div>
</div>

＆＃13;

＆＃13;

＆＃13;