Joyridestep has negative top-placement (i.e. top: -455px) on iOS devices.

[Jay031]

Describe the bug I'm using an ionic app (ionic 5 with angular 9.x) When I create an Android APK file, the ngx-joyride works fine (highlighting the right element + correct position) When I build for iOS and run it on an iPhone or on an emulator, I only see a backdrop. When inspecting the position top of the steps are all like: -400px, -350px etc. I also waited for 2 seconds before showing the tutorial, but that also didn't work, so it's not a timing issue.

To Reproduce Steps to reproduce the behavior: It's hard to reproduce, but this looks like it should be solveable. Maybe my main wrapper or highlighted items need some kind of extra CSS attribute? I tried, position relative/absolute etc. without success...

Expected behavior The joyride-step should be a lot further down. It looks like it thinks the screen is far to the top.

Screenshots Not provided - You only see a backdrop overlay over the screen.

Details (please complete the following information):

• Browser = InAppBrowser (iOS only) might also occur on Safari.
• Angular 9.1.6
• ngx-joyride 2.3.1
• Ionic 5.0.7

[Jay031]

More info;

I debugged the code of the plugin and found that it calculated the wrong 'top' from my selected element. In the code it checks if the ancestor has 'position: fixed' or 'position: absolute'. In my case, with position fixed, it used the following calculation which didnt work in iOS: elementRef.nativeElement.getBoundingClientRect().top

Which, in the plugin was called by function: getElementFixedTop() in document.service.ts I now changed it to always use: getElementAbsoluteTop() this works for me!

So the following calculation of the top-offset always works in my case:

const scrollOffsets = this.getScrollOffsets();
        return (
            elementRef.nativeElement.getBoundingClientRect().left +
            scrollOffsets.x
        );

[IgorGamella]

getScrollOffsets

This solution worked out for me, forcing the plugin to use getElementAbsoluteTop(), just a minor correction, in your comment you mentioned the getElementAbsoluteLeft calculation.

The getElementAbsoluteTop calculation is the following:

const scrollOffsets = this.getScrollOffsets(); return (elementRef.nativeElement.getBoundingClientRect().top + scrollOffsets.y);

[taiebnoe]

is there any plan to fix this in the repo?

[DiogoParrinha]

I'm facing this issue too

[DiogoParrinha]

@Jay031 @IgorGamella is there any way to workaround this without forking the repo and building a custom version of the package?

[jbwesleyster]

Se voces ainda tem esse problema, consegui resolver com esse link https://stackblitz.com/edit/angular-ivy-hwqnb7?file=src%2Fapp%2Fapp.module.ts

[Jay031]

Sorry but the issue is very outdated. I'm not experiencing any issues anymore at this moment. Please open your own issue if you have any issues!