I have the following component registered to my 3D glb object:

AFRAME.registerComponent('room', {
init: function() {

    let mesh = this.el.getObject3D('mesh')

    if (!mesh) {
        this.el.addEventListener('model-loaded', () => {
            el.addEventListener("click", evt => {
                console.log(evt)
                if (evt.detail !== null) {
                    this.intersection = evt.detail.intersection
                }
            });
        })
    }
},
});

In my camera object, I have placed the cursor with the raycaster attached:

    <a-entity camera-listener id="rig" class='rig' movement-controls="speed: 0.1;" navigator="cameraRig: #rig; cameraHead: #camera-rig;">
      <a-entity id="camera-rig" camera="active: true" position="0 1.6 0" look-controls="pointerLockEnabled: false; reverseMouseDrag: true">
        <a-entity id="mouseCursor" cursor="rayOrigin: mouse" raycaster="objects: .collidable"></a-entity>
      </a-entity>
      <a-entity laser-controls="hand: left" visible="true" raycaster="objects: .collidable;"></a-entity>
      <a-entity laser-controls="hand: right" visible="true" raycaster="objects: .collidable;"></a-entity>
    </a-entity>

When testing the app on Chrome, Firefox and Android devices the variable "evt" returns with a detail attribute that is not null that can be assigned to decide which child element of my glb object has been clicked. It works for me perfectly in these cases.

However, on Safari and iOS devices, the detail attribute of "evt" is always null and causes my app to crash if not checked. The check is easy but the main issue is that on these browsers I cannot detect which child object has been clicked from my glb as part of the scene.

Is there another way of raycasting that works across all browsers or have I made a mistake with my configuration? Any help would be much appreciated.