diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index 62c39d90a6..5189828399 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -209,7 +209,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<span>{{ i18n.ts.none }}</span>
 		</span>
 
-		<div :class="$style.guard" :style="{ clipPath: `polygon(${guardStartX * 100}% ${guardStartY * 100}%, 100% ${guardEndY1 * 100}%, 100% ${guardEndY2 * 100}%)` }"></div>
+		<div :class="[$style.guard, { [$style.showGuard]: debugShowPredictionCone }]" :style="{ clipPath: `polygon(${guardStartX * 100}% ${guardStartY * 100}%, 100% ${guardEndY1 * 100}%, 100% ${guardEndY2 * 100}%)` }"></div>
 	</div>
 
 	<div v-if="childMenu">
@@ -242,6 +242,8 @@ const props = defineProps<{
 	align?: 'center' | string;
 	width?: number;
 	maxHeight?: number;
+	debugDisablePredictionCone?: boolean;
+	debugShowPredictionCone?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -485,6 +487,7 @@ const guardEndY1 = ref(0);
 const guardEndY2 = ref(0);
 
 function parentMouseMove(item: MenuParent, ev: MouseEvent) {
+	if (props.debugDisablePredictionCone) return;
 	if (child.value == null || child.value.rootElement == null) return;
 
 	const itemBounding = (ev.currentTarget as HTMLElement).getBoundingClientRect();
@@ -794,6 +797,9 @@ function onMouseLeave() {
 	width: 100%;
 	height: 100%;
 	cursor: pointer;
-	//background: #f004;
+
+	&.showGuard {
+		background: #f004;
+	}
 }
 </style>
diff --git a/packages/frontend/src/components/MkPopupMenu.vue b/packages/frontend/src/components/MkPopupMenu.vue
index 4942ffe232..11b116d430 100644
--- a/packages/frontend/src/components/MkPopupMenu.vue
+++ b/packages/frontend/src/components/MkPopupMenu.vue
@@ -4,8 +4,31 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkModal ref="modal" v-slot="{ type, maxHeight }" :manualShowing="manualShowing" :zPriority="'high'" :anchorElement="anchorElement" :transparentBg="true" :returnFocusTo="returnFocusTo" @click="click" @close="onModalClose" @closed="onModalClosed">
-	<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :asDrawer="type === 'drawer'" :returnFocusTo="returnFocusTo" :class="{ [$style.drawer]: type === 'drawer' }" @close="onMenuClose" @hide="hide"/>
+<MkModal
+	ref="modal"
+	v-slot="{ type, maxHeight }"
+	:manualShowing="manualShowing"
+	:zPriority="'high'"
+	:anchorElement="anchorElement"
+	:transparentBg="true"
+	:returnFocusTo="returnFocusTo"
+	@click="click"
+	@close="onModalClose"
+	@closed="onModalClosed"
+>
+	<MkMenu
+		:items="items"
+		:align="align"
+		:width="width"
+		:max-height="maxHeight"
+		:asDrawer="type === 'drawer'"
+		:returnFocusTo="returnFocusTo"
+		:debugDisablePredictionCone="debugDisablePredictionCone"
+		:debugShowPredictionCone="debugShowPredictionCone"
+		:class="{ [$style.drawer]: type === 'drawer' }"
+		@close="onMenuClose"
+		@hide="hide"
+	/>
 </MkModal>
 </template>
 
@@ -21,6 +44,8 @@ defineProps<{
 	width?: number;
 	anchorElement?: HTMLElement | null;
 	returnFocusTo?: HTMLElement | null;
+	debugDisablePredictionCone?: boolean;
+	debugShowPredictionCone?: boolean;
 }>();
 
 const emit = defineEmits<{
diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts
index f7b59612c4..8e78127e8e 100644
--- a/packages/frontend/src/os.ts
+++ b/packages/frontend/src/os.ts
@@ -640,6 +640,8 @@ export function popupMenu(items: (MenuItem | null)[], anchorElement?: HTMLElemen
 	width?: number;
 	onClosing?: () => void;
 	onClosed?: () => void;
+	debugDisablePredictionCone?: boolean;
+	debugShowPredictionCone?: boolean;
 }): Promise<void> {
 	if (!(anchorElement instanceof HTMLElement)) {
 		anchorElement = null;
@@ -653,6 +655,8 @@ export function popupMenu(items: (MenuItem | null)[], anchorElement?: HTMLElemen
 			width: options?.width,
 			align: options?.align,
 			returnFocusTo,
+			debugDisablePredictionCone: options?.debugDisablePredictionCone,
+			debugShowPredictionCone: options?.debugShowPredictionCone,
 		}, {
 			closed: () => {
 				resolve();
diff --git a/packages/frontend/src/pages/debug.vue b/packages/frontend/src/pages/debug.vue
index 52940a5b0f..1ed19ae72c 100644
--- a/packages/frontend/src/pages/debug.vue
+++ b/packages/frontend/src/pages/debug.vue
@@ -32,7 +32,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkButton @click="os.alert({ type: 'question', title: 'Question', text: 'question' })">Question</MkButton>
 			</div>
 
-			<MkButton @click="select">select</MkButton>
+			<div class="_buttons">
+				<MkButton @click="select($event, false, false)">select without guard</MkButton>
+				<MkButton @click="select($event, true, false)">select with guard</MkButton>
+				<MkButton @click="select($event, true, true)">select with guard (visualize)</MkButton>
+			</div>
 		</div>
 	</div>
 </PageWithHeader>
@@ -76,7 +80,7 @@ const {
 	initialValue: 'info',
 });
 
-function select(ev: PointerEvent) {
+function select(ev: PointerEvent, enablePredictionCone: boolean, showPredictionCone: boolean) {
 	os.popupMenu([
 		{ type: 'parent', text: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', children: [
 			{ text: 'Option', action: () => {} },
@@ -109,7 +113,10 @@ function select(ev: PointerEvent) {
 			{ text: 'Option', action: () => {} },
 			{ text: 'Option', action: () => {} },
 		] },
-	], ev.target).then((value) => {
+	], ev.currentTarget ?? ev.target, {
+		debugDisablePredictionCone: !enablePredictionCone,
+		debugShowPredictionCone: showPredictionCone,
+	}).then((value) => {
 		console.log('Selected:', value);
 	});
 }