The only practical solution I could find was to simply accept the situation and set the child element’s position to absolute, adjusting its width and height using vh and vw instead.

** Noteworthy bug in html position:fixed!

Any element with transform, filter or perspective property will act as a containing block to all its descendants, including the elements whose position is set to fixed. 

in other words, javascript set inline set properties breaks the positioning of child elements with position:fixed. 
https://dev.to/salilnaik/the-uncanny-relationship-between-position-fixed-and-transform-property-32f6

** Understanding Stacking Contexts in HTML:

A stacking context is a hierarchy that determines the order in which elements are stacked on the page. Elements with a higher stacking context will appear above those with a lower one.

** Key points to understand:

	What creates a stacking context? 
An element creates a stacking context when it has any of the following: position set to relative, absolute, fixed, or sticky; z-index other than auto; opacity less than 1; certain CSS properties like transform, filter, perspective, etc.

   	How stacking contexts affect layering: 
Elements inside a stacking context are stacked in the order they appear in the HTML. The stacking context itself is stacked relative to its parent, which may also be in a different stacking context. This means an element in one stacking context can be hidden behind or in front of an element in another stacking context, even if the latter has a lower z-index.

   	Why it matters: 
Elements with higher z-index values may not always appear on top if they are in different stacking contexts. Understanding stacking contexts helps avoid unexpected layering issues when working with modals, dropdowns, tooltips, and other positioned elements.