Clipping fixed elements in IE/Edge - css

Question

For a page on a site I am building, I have implemented an effect where I have a grid of tiles, and the contents of each tile is fixed to the page (position: fixed) and only visible when the tile containing it "scrolls past". So, all tile contents are effectively piled on top of each other at the top of the page, but are clipped from view until the parent element overlaps it.
To briefly explain the technique, tiles are relatively positioned and contain an absolutely positioned element with a clip rectangle, which in turn contain the fixed element.
However, it does not render properly in IE/Edge; when the page initially loads it looks fine, but when scrolling, the clipped tile contents don't appear when they should. It works fine in Chrome, Firefox, and Safari (actually, the same issue occurs in Safari util transform: perspective(0); is added to the tile contents). It seems that IE "forgets" to render the tile contents, and only does so when the window is resized or some other page-wide event occurs that requires it to recalculate all elements.
body {
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
}
ul li {
margin-top: 10%;
position: relative;
border: 1px solid green;
}
ul li, ul li > div > div a {
width: 35%;
height: 0;
padding-bottom: 25%;
display: block;
}
ul li:nth-child(odd) {
clear: both;
float: left;
margin-left: 10%;
}
ul li:nth-child(even) {
float: right;
margin-right: 10%;
}
ul li > div, ul li > div > div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
ul li > div > div {
clip: rect(0, auto, auto, 0);
}
ul li a {
top: 0;
margin-top: 10%;
position: fixed;
background-color: #000;
color: #fff;
transform: perspective(0); /* necessary for Safari */
}
ul li:nth-child(odd) a {
left: 10%;
}
ul li:nth-child(even) a {
right: 10%;
}
ul li a h1 {
text-align: center;
line-height: 0;
padding-top: 30%;
}
<ul>
<li>
<div>
<div>
<a><h1>1</h1></a>
</div>
</div>
</li>
<li>
<div>
<div>
<a><h1>2</h1></a>
</div>
</div>
</li>
<li>
<div>
<div>
<a><h1>3</h1></a>
</div>
</div>
</li>
<li>
<div>
<div>
<a><h1>4</h1></a>
</div>
</div>
</li>
<li>
<div>
<div>
<a><h1>5</h1></a>
</div>
</div>
</li>
<li>
<div>
<div>
<a><h1>6</h1></a>
</div>
</div>
</li>
</ul>
<div style="clear: both; height: 1000px">
simulating a bunch of height
</div>