PopUpMenu Items are displaced when parent MenuBar is inside CanvasLayer

[ebon garnet]

Super noob, first time posting a question. I have a debug-menu scene that is a MenuBar>PopUpMenus>Items. I load that into my Game scene as follows:

func _ready() -> void:
    if OS.is_debug_build():
        var debug_menu_scene = preload("res://scenes/debug-menu.tscn")
        var debug_menu = debug_menu_scene.instantiate()
        $Overlay.add_child(debug_menu)

$Overlay is a CanvasLayer child of my Game node. When I play the debug-menu scene by itself, the items load in right below their respective PopUpMenu normally. When I play the main scene and load in the menu as above, the items are distanced as in the screenshots. They seem to be y shifted by some constant amount and x shifted by some scalar getting multiplied.

[ebon garnet]

Further info... It looks like when I set the Camera Zoom back to 1, the Items render in the correct place. My understanding is that CanvasLayers are supposed to render independently of the Camera changes. So, this seems like a bug with PopUpMenu?

[modest shell]

MenuBar, iirc, is not a popup on itself. It simply creates a popup when used.

Popups aren't CanvasItems, so i do not think they are meant to be affected by CanvasLayer. They may be affected by the Viewport (like the game window) so that may be why the zoom affects it.

[ebon garnet]

@modest shell

Is there a standard way to do what I'm trying to do? I want a menu overlay with some buttons, maybe drop downs like PopUpMenu has if possible, that will just draw on top of the display without being affected by viewport or camera changes?

Another use case would be the radial menu that you sometimes see for changing weapons/abilities on console.

Thanks for your help.

[modest shell]

You should generally avoid popups and rely on Control nodes. Popups are more similar to an OS window and don't integrate as well with the program's logic, they are more for apps.
Put the control nodes in a CanvasLayer to guarantee that they drawn above other stuff (and to give them higher input priority). You can also just use Node2Ds, like Area2Ds which can receive inputs.