Почему фиксированное положение детей влияет на родительский элемент при использовании преобразования?

Question

Если вы запустите фрагмент кода ниже и наведите курсор на синее поле, красные дочерние элементы div s будут отображаться странным образом, несмотря на то, что они position: fixed

.parent {
  width: 100px;
  height: 100px;

  margin: 32px auto;

  background-color: blue;

  transition: 0.5s;
}

.parent:hover {
  transform: scale(1.1);
}

.left {
  content: "";
  display: block;
  position: fixed;

  width: 50px;
  height: 100px;

  top: 32px;
  left: calc(50vw - 100px);

  background-color: red;
}

.right {
  content: "";
  display: block;
  position: fixed;

  width: 50px;
  height: 100px;

  top: 32px;
  right: calc(50vw - 100px);

  background-color: red;
}

<div class="parent">
  <div class="left"></div>
  <div class="right"></div>
</div>

Примечание: position: absolute ничего не меняет. Эффект все еще происходит, пока родитель имеет position: relative. Использование других преобразований, таких как translate, также приведет к этому эффекту.

Если эффект не использовал transform, эффект будет таким, как ожидалось.

.parent {
  width: 100px;
  height: 100px;

  margin: 32px auto;

  background-color: blue;

  transition: 0.5s;
}

.parent:hover {
  width: 110px;
  height: 110px;
  
  margin: 27px auto;
}

.left {
  content: "";
  display: block;
  position: fixed;

  width: 50px;
  height: 100px;

  top: 32px;
  left: calc(50vw - 100px);

  background-color: red;
}

.right {
  content: "";
  display: block;
  position: fixed;

  width: 50px;
  height: 100px;

  top: 32px;
  right: calc(50vw - 100px);

  background-color: red;
}

<div class="parent">
  <div class="left"></div>
  <div class="right"></div>
</div>

Как это исправить и все еще использовать transform?