[Bug]: Coachmark and TeachingBubble anchors don't handle page resizing

[monica-pandey]

Library

React / v8 (@fluentui/react)

System Info

"@fluentui/react": "^8.85.0"

Are you reporting Accessibility issue?

No response

Reproduction

Here's an easy repro:

• v7 https://codesandbox.io/s/funny-dew-eihn2
• v8 https://codesandbox.io/s/sleepy-alex-2e25bi

Bug Description

Actual behavior:
At initial zoom, coachmark looks like:
(browser is 'Restore down')

After zooming out, coachmark looks like:
(browser is maximized)

Please note, the issue is happening on page resizing

Expected behavior:
Callout elements remain anchored to their targets.

Logs

No response

Requested priority

High

Products/sites affected

Excel

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[monica-pandey]

I am facing this issue currently and I came across this bug: #10304, which got closed as it was marked stale for a long duration.
The issue still exists though, hence created a new bug, please help in resolving this issue, or suggest any workaround if available :-)

[layershifter]

The issue can be reproduced on both v7 & v8.

In v8 there is a listener for resize event that is triggered on a page resize:

fluentui/packages/react/src/components/Coachmark/Coachmark.base.tsx

Lines 278 to 289 in 52fad61

	events.on(window, 'resize', (): void => {
	timeoutIds.forEach((value: number): void => {
	clearTimeout(value);
	});
	timeoutIds.splice(0, timeoutIds.length); // clear array
	timeoutIds.push(
	setTimeout((): void => {
	setTargetElementRect();
	}, 100),
	);
	});

However, it seems that something does not work as expected.