Why don't animated filter effects respect child element's absolute positioning?

Question

I am trying to make an image fade in on page load. I have created an example that mostly accomplishes my purpose:

.fadeFromBlack {
    /* animation: FadeFromBlack steps(16) 0.5333333333s; */
    animation: FadeFromBlack 5.3333333333s;
}
@keyframes FadeFromBlack {
    from {filter: brightness(0%)}
    to {filter: brightness(100%)}
}

<div class="fadeFromBlack"><img src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" style="position: absolute; left: 0; top: 0;" /></div>

However, there is one problem. During the duration of the animation, the image is not positioned as expected; it follows the default positioning of the parent div element. It is only absolutely positioned correctly after the animation is complete.

I have observed two additional conditions required to trigger this problem:

• The effect is inherited from a parent tag. If the effect is applied directly to the img, the problem does not occur.
• The animation applies the filter property in @keyframes. Not all properties cause this problem; for example, the opacity property respects position as expected:

.fadeFromBlack {
    /* animation: FadeFromBlack steps(16) 0.5333333333s; */
    animation: FadeFromBlack 5.3333333333s;
}
@keyframes FadeFromBlack {
    from {opacity: 0}
    to {opacity: 1}
}

<div class="fadeFromBlack"><img src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" style="position: absolute; left: 0; top: 0;" /></div>

I have observed this is both Firefox and Chrome, so I do not think it is a browser-specific bug. For reference, I am running Firefox 64.0.2 on Windows 8, and have also tested this on Chrome 71.