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.

I am having the same issue in Instagram and I came across this solution.
I implemented a check for window.innerWidth > window.screen.width and sometimes this passes as true which leads me to believe this is the issue. Also with the 980 width until a refresh.
However, I’m not sure what width needs to be set when you say “change the width state to window.screen.width”. Also, I’m on a Vue/Nuxt app and not React. Please could you assist by telling me what width should be updated?

    //State of Screen width
    const [width, setWidth] = useState(window.innerWidth)

    // Screen width pixels for tablets
    const tabletBreakpoint = 767
    
    // When screen is resized
    useEffect(() => {
        const handleWindowResize = () => setWidth(window.innerWidth);
        window.addEventListener("resize", handleWindowResize);
        // Return a function from the effect that removes the event listener
        return () => window.removeEventListener("resize", handleWindowResize);
  }, []);

    // Fix instagram window.innerwidth issue
    useEffect(() => {
        if (window.screen.width < window.innerWidth) {
            setWidth(window.screen.width)
        }
    }, [])

My code that fixed it is above. Let me know If you need it explained further.

1 Like

Amazing, thank you.
Just one question. The setWidth(), is that a built-in React function? I see it in you consts at the top, but not sure what the actual function definition of that would be? I’m not familiar with React but assume it is a React thing which I should try to replicate in my Vue app.

width and setWidth are created from the built-in react hook/function ‘useState()’. When setWidth() is called, width is updated to whatever you put into the setWidth(). The argument inside the useState() function at the top is the initial state of width (when the app loads).

When the window is resized, setWidth is called to update the width with the event listener.

Unfortunately, I don’t have experience with Vue, but I hope my explanation helps somewhat. Look up the useState() hook for react and it should explain is better than I have.

Thanks so much. I appreciate it immensely. You have explained perfectly.

I’ll look up the useState and see how I can use it for my purposes.

@RubenEngel solution worked (thanks a million! spent all day) and I just had to make sure width propagated to all the components that depended on it. :rocket: