Sp-menu backround clipping

InDesign
7

This bare-bones code works for me with NO clipping/flashing when you roll the mouse over the menu.

<!DOCTYPE html>
<html>
<head>
	<script src="main.js"></script>
	<style>
		sp-action-button {
			position: absolute; /* for demo to position top right in panel */
			top: 16px;
			right: 16px;
		}
		sp-menu {
			width: 100px; /* fixed width required */
			background-color: gray; /* else transparent by default */
		}
	</style>
</head>
<body>
	<sp-overlay>
		<sp-action-button size="s" slot="trigger">Click Me</sp-action-button>
		<sp-popover offset="0" placement="bottom" alignment="left" appearance="none" slot="click">
			<sp-menu size="s">
				<sp-menu-item>One</sp-menu-item>
				<sp-menu-item>Two</sp-menu-item>
				<sp-menu-item>Three</sp-menu-item>
			</sp-menu>
		</sp-popover>
	</sp-overlay>
</body>
</html>

Producing this:

image
image730×842 8.01 KB

(You’ll have to take my word for it that it doesn’t flash when I roll the mouse over it – I don’t know how you’ve done your fancy screen recording :wink:).

Latest InDesign; latest UXP; vanilla javascript (not react); built-in widgets (not spectrum web components); tested on Mac and Windows.

Makes me think that the clipping/flashing you are seeing might not be inherent to the widgets but caused by something else in your code.

Philip