Wrong position of onboarding item

[SDohle]

In a DevExreme modal dialog the onboarding item appears on a wrong position.

[miller45]

Maybe position can be retrieved with this method: https://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element

[MichaelKirchner]

same like #17

[miller45]

I just tested it with elements that have transform: translate... the getBoundingClientRect takes that into consideration and returns the correct position. See https://stackblitz.com/edit/js-a58qrv

[miller45]

Ok Internet explorer is returning a different object (ClientRect): https://caniuse.com/#search=getBoundingClientRect But as we have a access to the position encapsulated in OnboardingHtmlElementHelper getPosition we can simply write a our own "polyfix":

public static getPosition(htmlElement: HTMLElement) {
        const rect: ClientRect | DOMRect = htmlElement.getBoundingClientRect();
        if ((window as any).DOMRect && rect instanceof DOMRect) {
            return {
                x: rect.x,
                y: rect.y,
                width: rect.width,
                height: rect.height
            };
        }
        return {
            x: rect.left,
            y: rect.top,
            width: rect.width,
            height: rect.height
        };
    }

The check if ((window as any).DOMRect looks useless but as Internet Explorer doesnt know about DOMRect it would throw an exception when we call rect instanceof DOMRect directly.

[miller45]

another check which avoids access to window looks like this if (typeof DOMRect !== 'undefined' && rect instanceof DOMRect)