I have a transparent animated gif within a circular div with a border. On iOS devices, including Mac's, the transparent background of the gif eats up the border of the surrounding div (see image)
Ive tried giving the enclosing div a higher z-index than the gif but it still doesn't work. How can I overcome this issue? This worked fine before Apple's recent iOS update.
.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;}<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>