Firebase Realtime Database is returning permission_denied for mobile but not desktop

I have this realtime document structure: /calls/:calleeId/:callerId and defined these rules

"calls": {
  "$calleeId": {
     ".read": "$calleeId === auth.uid",
    ".write": "$calleeId === auth.uid",
    
   "$callerId": {
      ".read": "$callerId === auth.uid",
      ".write": "$callerId === auth.uid",
    },
  }
}

These rules are working perfectly on desktop, but in mobile(web) im getting this error with the same users and context

this is my listener function

      const callsRef = firebaseRealtimeDB.ref('calls')

      function initCallAnswerListener () {
        const {callerId, calleeId} = this.props
        if (callerId && calleeId) {
          this.currentCallRef = callsRef.child(calleeId).child(callerId)
          this.currentCallRef.on(
            'value',
            snapshot => {
              if (snapshot.val()) {
                this.call = snapshot.val()
                if (this.call.status === 'declinedByCallee') {
                  this.closeVideo('declinedByCallee')
                }
              }
            },
            errorObject => {
              console.log('Error reading call response')
              console.error(errorObject)
            },
          )
        }
      }

Steps to reproduce the bug (Safari/chrome in iOS):

1. Realtime listener works normally
2. Lock the phone and wait until users is disconnected (i'm using '.info/connected to track it)
3. Unlock the phone. Now the calls listener deny the reads as the above image

PD: firestore listeners work after that