Instagram in-app-browser does not support my Blocs website!

Hi Guys
I thought I had my website ready, but I guess not quite yet… I put the link to the website in my Instagram bio, then I was surprised by the feedback. The page doesn’t load correctly and looks terrible. (After reloading, then everything fits.) I have recharchiert a lot, but not really found a solution that I can implement as not a programmer. This post seems to be very similar and is also very up to date → Discussions · community · GitHub
The solution seems to be to create a useEffect that sets the width state to window.screen.width if the window.innerWidth is greater than window.screen.width when the page loads. I don’t understand much about it;-) As experts, do you guys have any ideas? :wink: I would be very thankful for your help! Following are some screenshots of what the page looks like and the link to my Instagram profile.

https://www.instagram.com/fokus.design.official/
Does not load correctly:

After reloading (correct):

Hello, Joel. I tested your website just now using the iOS Simulator on my Mac and again on my iPhone 7. In both cases, the background graphic loads perfectly – no reload required.

1 Like

Thank you for testing! @JDW I asked around 10 more people and it did not work for four. very strange! It seems like the error appears randomly. Maybe it is a problem associated with blocs? @Norm Do you know about a case in which this or a similar error already occured?

Hey @Joel.Rohland

Works fine for me, iPhone 11.

1 Like

I cannot verify the problem myself, like I said, but I can only say it seems like some kind of caching problem. It’s almost as if those 4/10 people who found a problem had an old version of the CSS file on their phones and then when the opened your site, something broke. I’ve seen that before. In fact, I see it often on my sites I view in Safari on the Mac, but it goes away when I force refresh via Option-Command-R.

Yeah, that seems to be right! We have asked the 10 people again to open the page a second time. For all 10 people, the page did not load correctly. We also noticed that the 4 people for whom it didn’t work the first time had already visited our site a few days earlier. It seems that the page loads correctly the first time, but does not load correctly from the second time on. I have tried different export options from Blocs and have completely reloaded the site to our server several times. Unfortunately nothing worked! We noticed that when redirecting from another website to ours, the error does not occur and the page always loads correctly in the IG in-app browser. Therefore, we have built a kind of “linktree-page” with blocs as a workaround. From this “linktree-page” you will be redirected to our website. Now it seems to work! However, this is not a 100% solution and we would be very happy if someone could help us. :wink: