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 may be positioned. The Beacon may not latch on to the right element and as a result, the content may overlap with underlying elements.

Probable Cause:

A Beacon may overlap with the underlying element when screen resolution or zoom level changes. As a result of the change in the screen resolution, the height and width of the element that you have selected may 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 the factors like height, width, and position of the selected element. When there is a variation in the screen resolution or when the zoom level is varied, the selected element's height and width may also change. As a result, the Beacon attached to that element may overlap with the elements of the underlying application. Whatfix recommends selecting an element that doesn’t change its dimensions, such as height and width, regardless of the change in the screen resolution.