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 noahbeckwith.com if you want to look yourself.

Thanks

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.