I'm working on a new project and I'm facing a very weird issue that I have no idea how to solve. I've tried hundreds of things and couldn't find any reason why it's not working.
I've simplified the project into 2 simple websites with a fresh WordPress installation so there will be no conflicts.
So the problem that I'm facing is I can't have a product in the cart while iframing a website and accessing it from an IOS device(iPhone X) or from Safari on mac device. On mac desktop: chrome and firefox it's working. On windows desktop: chrome and firefox it's working. On IOS (iPhone X) device: not working on Chrome and Safari.
Here is a video that shows the issue: Here I'm accessing the website from my Macbook pro from Chrome and the functionality is working and when accessing from Safari the functionality is not working https://www.loom.com/share/d33e999767d046b7863e02a386dcb3cd - MacOs desktop (Chrome & Safari)
Here I'm accessing the website from my iPhone X device from Chrome and Safari and the functionality is not working. https://www.loom.com/share/6f13cf31d08b4b65aaa00980c5c16343 - iPhone X (Chrome & Safari)
What I did is I've created 2 websites:
Website 1: http://18.221.221.58/
Website 2: http://3.17.28.15/
On website 1: the only thing I did is created a page called iframe that is iframing website 2 enter image description here
On Website 2: I've installed WooCommerce and Added a test product.
I can also share login details to the websites if somebody needs it. I'm really puzzled about what could it be, and it's even possible to troubleshoot this error? I'll be very surprised if someone faced this before but I'm really don't know how to solve it and I'll really appreciate your help guys.
Thank you very much!