Instagram In-app browser loading site incorrectly

When I open my site through Instagram’s in-app browser, a few parts of the CSS get ignored, like the mix-blend-mode and the type size. On refresh it loads fine, but initially it’s all messed up. I have initial-scale="1" set, and tried setting media="screen" as well, but neither of those things solve the problem. The site is fine in Slack and Gmail’s in-app browsers, so I think it may just be Instagram.

Also, on some iPhones, when you look at the site in Safari and zoom in, it disables the mix-blend-mode. This isn’t a huge issue, but maybe it could provide some clue about what’s going on.

The site is if you want to look yourself.


Ran into the same issue with IG in-app browser showing broken CSS. Went through some old school JS debug and the issue is, when IG in-app browser opens up your page, sometimes the window.innerWidth is set to 980. If you use bootstrap, that breaks a lot of your CSS.

what about fonts? tell me more

The original problem resolved on its own (I think Instagram updated the in-app browswer), but today it started not even opening the link. The page just slowly tries to load but then never actually appears. :frowning_face:

Thanks for this info. To fix my issue using React I created a useEffect and called it to change the width state to window.screen.width if the window.innerWidth was greater than window.screen.width when the page loads. Hopefully this can help someone experiencing a similar issue.