"position: fixed" の基準点は先祖要素に "transform" が設定されているとその要素になる

position: fixed; を指定すると表示領域を基準に位置の設定をできると思っていましたが、先祖要素に transform: none 以外を指定するとその要素が基準になるようです。

実例

右側のカードにのみ transform: translate(0); を指定しています。
レンガのをクリックすると、position: fixed; を用いて実装したモーダルウィンドウが開きます。右側のカードでは全画面表示になっていないことが確認できます。

ではどうする？

モーダルウィンドウを実装するのであれば、<dialog> 要素を使うのが良いです。全画面だけではなく、WAI-ARIA ロールがデフォルトで設定されていたり ESC キーで閉じるなどモーダル実装に必要がことをブラウザ側が提供してくれています。

<dialog> 要素を使用して書き換えてみました。どちらの場合でも全画面表示できていますね。