Css translate y making background-image disappear - html

Question

I am having a problem with an element when I use the translate-y in active state, it makes the background-image disappear. Click the element and you will see the image disappear.
The Css:
.glyphsblock i {
display: inline-block;
position: relative;
width: 38px;
height: 38px;
background-size: contain;
background-repeat: no-repeat;
background-position: center, center;
border: 1px solid #fff;
margin: 1px;
flex-shrink: 0;
cursor: pointer;
transition: all ease 0.1s;
}
.glyphsblock i:before {
background: radial-gradient(#8ed3c8, #224945);
content: " ";
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
top: 0;
left: 0;
}
.glyphsblock i:active {
transform: translateY(2px);
}
.glyph-A {
background-image: url(https://atlasdatabase.github.io/glyphs/a.png);
}
HTML Code:
<div class="glyphsblock">
<i class="glyph-A"></i>
</div>
Also a jsfiddle of the issue: https://jsfiddle.net/go0tbb53/

Answer 1

Refactor your CSS to remove the negative z-index, which can produce unpredictable results. This is what was causing the transform to glitch and hide the glyph icon.
I've adjusted your snippet so now the i itself has the radial gradient, and the ::before pseudo-element is laying the glyph graphic on top of it.
You can see it working below:
.glyphsblock i {
background: radial-gradient(#8ed3c8, #224945);
display: inline-block;
position: relative;
width: 38px;
height: 38px;
border: 1px solid #fff;
margin: 1px;
flex-shrink: 0;
cursor: pointer;
transition: all ease 0.1s;
}
.glyphsblock i::before {
background-size: contain;
background-repeat: no-repeat;
background-position: center, center;
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.glyphsblock i:active {
transform: translateY(2px);
}
.glyph-A::before {
background-image: url(https://atlasdatabase.github.io/glyphs/a.png);
}
<div class="glyphsblock">
<i class="glyph-A"></i>
</div>

Answer 2

This may not be totally conventional, but I changed your jsfiddle to use a sized div for the background and an image for the icon itself. If you want to use multiple icons, simply make a larger wrapper div for multiple of what is currently called glyphsblock.
Also, my solution doesn't have any javascript, which is helpful :)
.bg-grad {
background: radial-gradient(#8ed3c8, #224945);
width: 38px;
height: 38px;
z-index: -1;
position: absolute;
}
.glyphsblock:active {
transform: translateY(2px);
cursor: pointer;
transition: all ease 0.1s;
}
<div class="glyphsblock">
<div class="bg-grad">
</div>
<img src="https://atlasdatabase.github.io/glyphs/a.png" height=38px width=38px/>
</div>