Empty overlapping css grid cell prevents clicks in Firefox and Edge - html

Question

In one page of our app we have a grid with two cells stacked one on top of the other.
On Chrome the middle textbox in the grid shown below is clickable, but in Firefox and Edge(17) it cannot be clicked.
I'm curious about which browser has the bug or whether this is undefined behaviour?
More immediately though is there a workaround for Firefox?
Thanks.
.grid {
display: grid;
align-items: stretch;
justify-items: stretch;
grid-template-rows: [first] repeat(2, minmax(auto, auto)) [last];
}
input {
width: 100%;
}
.a {
grid-area: 1 / 1 / span 1 / span 4;
}
.b {
grid-area: 1 / 5 / span 1 / span 4;
}
.c {
grid-area: 1 / 5 / span 1 / span 4;
}
.d {
grid-area: 1 / 9 / span 1 / span 4;
}
<div class="grid">
<div class="a">
<input>
</div>
<div class="b">
<input>
</div>
<div class="c">
</div>
<div class="d">
<input>
</div>
</div>
Stackblitz link: https://stackblitz.com/edit/js-pukd5g?file=index.html

Answer 1

you can reset pointer-events to allow clicking through an element, or reset position to bring an element on top of static elements:
pointer-events:
.grid {
display: grid;
align-items: stretch;
justify-items: stretch;
grid-template-rows: [first] repeat(2, minmax(auto, auto)) [last];
}
input {
width: 100%;
}
.a {
grid-area: 1 / 1 / span 1 / span 4;
}
.b {
grid-area: 1 / 5 / span 1 / span 4;
}
.c {
grid-area: 1 / 5 / span 1 / span 4;
pointer-events:none;/* here it won't catch mouse events */
}
.d {
grid-area: 1 / 9 / span 1 / span 4;
}
<div class="grid">
<div class="a">
<input>
</div>
<div class="b">
<input>
</div>
<div class="c">
</div>
<div class="d">
<input>
</div>
</div>
position
.grid {
display: grid;
align-items: stretch;
justify-items: stretch;
grid-template-rows: [first] repeat(2, minmax(auto, auto)) [last];
}
input {
width: 100%;
position:relative;/* will be at front of static positionned elements */
}
.a {
grid-area: 1 / 1 / span 1 / span 4;
}
.b {
grid-area: 1 / 5 / span 1 / span 4;
}
.c {
grid-area: 1 / 5 / span 1 / span 4;
}
.d {
grid-area: 1 / 9 / span 1 / span 4;
}
<div class="grid">
<div class="a">
<input>
</div>
<div class="b">
<input>
</div>
<div class="c">
</div>
<div class="d">
<input>
</div>
</div>

Answer 2

I'm not sure if it's a bug or just a difference in rendering behavior among browsers.
But a simple workaround is to layer the clickable element over the empty element using z-index.
Add this to your code:
.b {
z-index: 1;
}
.grid {
display: grid;
grid-template-rows: [first] repeat(2, minmax(auto, auto)) [last];
}
input {
width: 100%;
}
.a {
grid-area: 1 / 1 / span 1 / span 4;
}
.b {
grid-area: 1 / 5 / span 1 / span 4;
z-index: 1; /* new */
}
.c {
grid-area: 1 / 5 / span 1 / span 4;
}
.d {
grid-area: 1 / 9 / span 1 / span 4;
}
<div class="grid">
<div class="a">
<input>
</div>
<div class="b">
<input>
</div>
<div class="c">
</div>
<div class="d">
<input>
</div>
</div>