Only on active shown div blocks execution of link in Firefox - html

Question

An <a href> element surrounds two divs. One of the divs is only shown, if the link is active (moment of clicking). And it is placed above the other div. It is used as a feedback for clicking.
You can see and try this here: https://jsfiddle.net/pjgdtade/2/
a {
text-decoration: none;
display: flex;
position: relative;
width: 328px;
}
div.tile {
position: relative;
padding: 12px 10px;
box-sizing: border-box;
background-color: white;
color: black;
display: block;
width: 328px;
margin: 0;
box-shadow: 1px 2px 4px 0 #e0e0e0;
border: solid 1px #dcdcdc;
}
div.link-active-cover {
background: rgba(220, 220, 220, 0.6);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
}
a:active div.link-active-cover {
display: block;
}
<a href="https://www.google.de" target="_blank">
<div class="tile">
This is some content in a clickable box.
</div>
<div class="link-active-cover"></div>
</a>
In Chrome everything works as expected, but in Firefox the link is not executed. On click the div.link-active-cover shows up, but the new page does not open.
Funny fact: If div.link-active-cover is visible from the beginning (no display: none), the div is shown and the link works.
Am I wrong with this or is it a bug in Firefox?

Answer 1

Probably because when click event occurs (after mouseup), the mouse is not on primary clicked element.
No matter, the solution would be to use opacity change:
a {
text-decoration: none;
display: flex;
position: relative;
width: 328px;
}
div.tile {
position: relative;
padding: 12px 10px;
box-sizing: border-box;
background-color: white;
color: black;
display: block;
width: 328px;
margin: 0;
box-shadow: 1px 2px 4px 0 #e0e0e0;
border: solid 1px #dcdcdc;
}
div.link-active-cover {
background: rgba(220, 220, 220, 0.6);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: .001;
}
a:active div.link-active-cover {
opacity: 1;
}
<a href="https://www.google.de" target="_blank">
<div class="tile">
This is some content in a clickable box.
</div>
<div class="link-active-cover"></div>
</a>
Updated Fiddle.