tnicola/ngx-joyride

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

Closed this issue · 7 comments

Jay031 commented

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 commented

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 commented

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);

  • 🎉1
taiebnoe commented

is there any plan to fix this in the repo?

  • 👍1
DiogoParrinha commented

I'm facing this issue too

DiogoParrinha commented

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

jbwesleyster commented

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 commented

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!

  • 👍1