Misplaced position of the highlighting if using a mobile device and changing the orientation

[mleister97]

🐛 Bug Report

Misplaced position of the highlighting if using a mobile device and changing the orientation.

To Reproduce

Please checkout your official website https://react-joyride.com/ Highlighting step 2 is not working as expected on an iPad (iPad Air (4. Generation), iOS 14.4.1) after chaning the orientation of the device

Video

https://user-images.githubusercontent.com/16700053/175545514-1705ec21-7ae7-4635-9e8e-ec647e0b3657.mp4

[gilbarbara]

hey @mleister97

Couldn't replicate this behavior with Browserstack. The spotlight re-arranged itself to the correct position after rotating.

Feel free to submit a PR.

[mleister97]

Hey @gilbarbara, I tried different real-world iOS devices, please see the list below:

• Not working on iPad Air 4. Gen using iOS 14.4.1
• Not working on iPad Air using iOS 12.4.8
• Working "fine" on iPhone 6 using iOS 12.5.5 (the position is correct but the modal is slightly misplaced. after scrolling a bit everything works fine)

[krishgt60]

Even we are facing the same issue, so please can someone help me out with this, its bit urgent

Thank you

[gilbarbara]

If someone else faces this problem, one could get the popper instance and update the position manually.

function App() {
	const updatePosition = useRef<(() => void) | null>(null);

	return (
		<Joyride
	        floaterProps={{
	          getPopper: (popper, type) => {
	            if (type === 'floater') {
	              updatePosition.current = popper.instance.update;
	            }
	          },
	        }}
		/>
	);
}