Beacon overlaps with the elements of the underlying application

Issue

When you try to position a Beacon on an element of the application, sometimes the content doesn't appear correctly. The Beacon might not latch on to the right element and as a result, the content overlaps with underlying elements.

Probable Cause

A Beacon might overlap with the underlying element when screen resolution or zoom level changes. Due to changes in the screen resolution, the height and width of the element that you have selected might also change.

Suggested Solution

While positioning a Beacon select a smaller element whose height and width won't change even if the screen resolution is changed.

Flexible positioning relies on factors like height, width, and position of the selected element. When there is a variation in the screen resolution or when the zoom level varies, the selected element's height and width also changes. As a result, the Beacon attached to that element overlaps with the elements of the underlying application. So Whatfix recommends selecting an element that doesn’t change its dimensions, such as height and width, regardless of the change in the screen resolution.