Wrong position on mobile Safari 14 (iOS)

[tubauwe]

Using ngx-joyride for a progressive web app made with Ionic Framework the position of the first step is outside viewport. After rotation for e.g. portrait mode to landscape mode it will be shown, but the position is not fully correct. It doesn't matter in which mode I'm starting. The first step is out of view in landscape mode, too. After re-orientation to portrait mode it will be shown. On android devices and on desktop systems with all tested browsers (Safari, Chrome, Firefox) it seems to be okay.

Do you know how to solve this? Thanks in advance!

[Jay031]

Hi, I have the same problem when I include this in my ionic project. On Android & Web it works like a charm. When I run the Cordova project on iOS it always has a big negative top-margin. So it will be on the top. Outside of the screen. Did you already find any solution?

I'm trying to solve this all day now! Tomorrow I'll continue...

[tubauwe]

Hi, I didn't find a solution until now. I'm using centered steps at the moment without highlighting the corresponding elements. But this is not what I want to do. I'm trying again and will write if I'll find a solution.

[Jay031]

Hi @tubauwe,

I fixed my issue. I debugged the defualt 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!

If you need help, let me know!

[tubauwe]

Hi @Jay031,

I tried your solution: Changed getElementFixedTop() to getElementAbsoluteTop() in ../myProject/node_modules/ngx-joyride/esm5/lib/services/document.service.js and ../myProject/node_modules/ngx-joyride/esm2015/lib/services/document.service.js, but nothing changed.

Is this the right way or how must I do this? Thanks in advance!

[IgorGamella]

Hi @Jay031,

I tried your solution: Changed getElementFixedTop() to getElementAbsoluteTop() in ../myProject/node_modules/ngx-joyride/esm5/lib/services/document.service.js and ../myProject/node_modules/ngx-joyride/esm2015/lib/services/document.service.js, but nothing changed.

Is this the right way or how must I do this? Thanks in advance!

Hi Tubauwe, you may have fixed it in these 2 files, but there are 7 other files you can/should change too.

In my case, I changed the calculation for every occurrence I've found in the plugin/module folder: node_modules/ngx-joyride/ivy_ngcc/fesm2015/ngx-joyride.js node_modules/ngx-joyride/ivy_ngcc/fesm2015/ngx-joyride.js.map node_modules/ngx-joyride/bundles/ngx-joyride.umd.js node_modules/ngx-joyride/bundles/ngx-joyride.umd.js.map node_modules/ngx-joyride/bundles/ngx-joyride.umd.min.js.map node_modules/ngx-joyride/esm2015/lib/services/document.service.js node_modules/ngx-joyride/esm5/lib/services/document.service.js node_modules/ngx-joyride/fesm2015/ngx-joyride.js node_modules/ngx-joyride/fesm5/ngx-joyride.js

At least in early tests, this seems to have solved the issue!

[taiebnoe]

is there any plan to fix this in the repo?

[rashmib16]

Hi @Jay031 Is there any fork repo for this fix?

[taiebnoe]

Looking for this as well

[AaronMorse]

This fork fixes the issue. But there is no pending PR for it. https://github.com/datalyx/ngx-joyride

[hmaretic24]

I came across the same problem. Adding position:relative; to the body element solved the problem for me.

[TristaoEzio]

Recently, I used the library in a project with Ionic 6, Angular, and TypeScript. When testing the flow on iOS, I encountered the same error. Following the suggestion from user @hmaretic24, I was able to resolve the issue. Thank you!

On the application page, I added the following code snippet to adjust the position of the element:

body { position: relative; }