Instagram browser (form iOs) doesn't display all the elements on my ste

Question

My site works perfectly across devices/browsers.

Except from the native Instagram browser. When you click the link from the bio (from an iphone - not sure about Android), it opens the site and finishes loading, except for all the images. If you navigate further into product pages, the product image gallery is also missing.

I have cleared the cache of the phone, of Instagram, Safari, Chrome. Nothing seems to be affecting it.

Can't find a way to replicate the issue on a desktop or find the exact setup of IG's browser.

Any ideas?

Answer 1

Yes, you can use Safari to replicate the issue.

1. First you need to find out what userAgent this Instagram is. So I just stuck this code on the webpage.

    <p id="agent"></p>
    <script>
        document.getElementById('agent').innerHTML = navigator.userAgent;
    </script>

2. It prints out...

   Mozilla/5.0 (iPhone; CPU iPhone OS 12_3_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 Instagram 112.0.0.17.121 (iPad7,5; iOS 12_3_1; en_AU; en-AU; scale=2.00; 750x1334; 173391461

and so I copied it

3. I go to Safari
4. Open the "Develop" menu, "User agent" then "Other"
5. I paste
6. I resize the Safari window to be the same dimensions of my iphone browser and then I'm good to go!