Instagram, How many baby chicks need to die before you fix your in-app browser viewport?

Instagram, how many baby chicks need to die before you fix your in-app browser viewport? 🐥Sadly, with examples.Dear Instagram,I like to design simple mobile web app layouts that consist of a header containing navigation positioned at the top, a centere…

Instagram, how many baby chicks need to die before you fix your in-app browser viewport? 🐥

Sadly, with examples.

Dear Instagram,

I like to design simple mobile web app layouts that consist of a header containing navigation positioned at the top, a centered content area, and a footer containing actions positioned at the bottom. This works well for my users. In all my testing, this layout appears as it should with the exception of your in-app browser on the iOS Instagram app. In this viewport, the footer is cut off and elements are either out of view or more gruesomely, severed in half.

Now, you may not know this, but I raise baby emoji chicks on the side and these lovable creatures like to sit on the bottom of web apps. Well, you can imagine my shock when I checked on my babies in your app. What follows is actual raw footage of the issue. Viewer discretion is advised.

Shame on you,

Lee Martin

iOS Safari vs. iOS Instagram
iOS Twitter vs. iOS Instagram
iOS Facebook vs. iOS Instagram

Illustrating The Issue

It would seem that Instagram is not recalculating the available vertical space once adding their custom header and footer bars. They put in the extra work to get their design language into the UX but did not test the actual functionality of the browser. I believe they are using WKWebView.

Related Stories


Instagram, How many baby chicks need to die before you fix your in-app browser viewport? 🐥 was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.


Print Share Comment Cite Upload Translate
CITATION GOES HERE CITATION GOES HERE
Select a language: