Fixed position inside absolute inside fixed - html

Question

One DOM element with position: fixed, another one inside with css-transforms, another one inside that one with position: fixed
All fixed position elements is supposed to be positioned based on the viewport as container, but when the middle element has css-transforms, the inner fixed element is positioned based on the middle element instead of the viewport.
.backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.1);
}
.contents {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 200px;
border: 1px solid red;
transform: translateX(-50%) translateY(-50%);
}
.inner-fixed {
position: fixed;
top: 20px;
left: 20px;
background: rgba(0, 0, 255, 0.1);
width: 100px;
height: 50px;
}
<div class="backdrop">
<div class="contents">
Contents in centered box
<div class="inner-fixed">
Inner-fixed contents
</div>
</div>
</div>
If I remove the transform on the .contents, the inner element is fixed based on viewport.
Happens in Chrome 62 and Firefox 57 (Mac)
Any way around this with the same DOM, so the inner element is fixed based on the viewport without having to skip the use of css-transforms?
With the css-transform:
Without the css-transform: