Explain how position: fixed; works. when is transform used?

Question

css

I can't figure out how position fixed works. According to the documentation, it attaches the layer to the browser window, but if you use transform, then the work changes, and it is already attached to the layer, and not to the browser window (the behavior becomes like position: absolute, but for a number of facts it is still fixed).
I know that when using transform: translateZ(0); the layer goes into a different stacking mode, this is most likely related to this, who can explain this behavior?
Example https://codepen.io/anon/pen/LdWmJw
Code

<style>
.parent {
 
  width: 30%;
  background: blue;
  height: 2500px;
  float: left;
}
.child {
  position: fixed;
  width: 50px;
  height: 50px;
   top: 30px;
  left: 50px;
  background: red;
}


.parent2 {
  width: 30%;
  background: green;
  height: 2500px;
  transform: translateZ(0);
  float: left;
}
.child2 {
  position: fixed;
  top: 30px;
  right: 50px;
  width: 50px;
  height: 50px;
  background: red;
}
</style>

<div class="parent">
  <div class="child"></div>
</div>

<div class="parent2">
  <div class="child2"></div>
</div>

Answer 1

who can explain this behaviour?

The specification can explain :
We added a transform to the element - all its descendants with position:fixed start counting their position from it. They start to think of it as their "outer box" rather than the viewport or page, as is the default for position:fixed.

Answer 2

Is there any way to change this behavior? So that fixed is calculated from the viewport, regardless of the parent's transform?