[Personal Log] iOS Safari Error: React App

While implementing mobile supported web application, I ran into The object can not be found here. error from iOS Safari during testing.

In Desktop web browsers and other browsers in the mobile works fine.

My code looked like followings.


return <div>
    {state === 'LOADING' && <div>Loading</div>}
    {
      type === 'youtube' ? <iframe ... /> : <video ... />
    }
  </div>

This code is pretty simple. It just display the loading during the loading state, and disappears when the data is loaded. However, somehow iOS Safari doesn't like it.

I kept getting the same errors over and over, and eventually I fixed this issue by adding another div wrapper.

return <div>
        {state === 'LOADING' && <div>Loading</div>}
         <div>
           { type === 'youtube' ? 
              <iframe ... /> : <video ... />
           }
         </div>
       </div>