Having Issue with displaying image and text in the experience on ios devices only. Working fine on android

🧑‍💻 Technical Support
1

So basically I have image and text show up when 8th wall after camera launches. These are showing up on Android fine but not on iOS why?

attaching snippet of my code as well.

Screenshot 2024-04-26 at 11.44.31 AM
Screenshot 2024-04-26 at 11.44.31 AM2066×604 139 KB

Have tried position: Absolute as well.
Also the image and instruction is visible in 8thwall simulator but nothing is visible on ios device.

Thanks in advance.

2

I had this issue.

If you have disabled SLAM, by adding xrweb="disableWorldTracking: true" to a-scene, you need to ask iOS specifically to use the gyro. Otherwise, the positions for the entities in a-scene will never update.

It took me three working days to figure out what the problem was, and the solution came to me when I finally found this obscure (and non-explained) code in the documentation:

My component below won’t affect Android, but it has two sequential prompts that show on iOS. There are two because the second one is from the system, and if the user denies that one, they will need to restart Safari to get that request again. So the first prompt is (from 8th Wall and) is mainly there to condition the user to accept the more crucial second prompt.

Import this component in your index.js file and add the component to your a-scene entity.

const pipelineAdditions = {
  init() {
    const load = () => {
      window.removeEventListener('xrloaded', load);
      
      XR8.addCameraPipelineModules([
        {
          name: 'request-gyro',
          requiredPermissions: () => ([XR8.XrPermissions.permissions().DEVICE_ORIENTATION]),
        },
      ])
    }
    
    window.XR8 ? load() : window.addEventListener('xrloaded', load);
  }
}

export {pipelineAdditions}

I also added QR Code reading to the pipeline via this component, but I removed it for the sake of the example.

1 Like
3

Another option, if you want the text to be fixed on your screen, is mainly to add the entities inside a-camera, where the positions on the child entities will update with the camera’s position, but you need to add a z position to your a-plane, just like you have on your a-text.

The easiest solution, again, if you want it fixed on your screen, is to not have anything at all inside a-scene but plainly add HTML elements that have absolute positioning.

4

Thank you so much for answering. I’ll try and will let you know.
Thanks again