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…


This content originally appeared on Bits and Pieces - Medium and was authored by Lee Martin

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.


This content originally appeared on Bits and Pieces - Medium and was authored by Lee Martin


Print Share Comment Cite Upload Translate
APA
Lee Martin | Sciencx (2022-12-02T20:53:17+00:00) » Instagram, How many baby chicks need to die before you fix your in-app browser viewport?. Retrieved from https://www.scien.cx/2021/02/02/instagram-how-many-baby-chicks-need-to-die-before-you-fix-your-in-app-browser-viewport/.
MLA
" » Instagram, How many baby chicks need to die before you fix your in-app browser viewport?." Lee Martin | Sciencx - Tuesday February 2, 2021, https://www.scien.cx/2021/02/02/instagram-how-many-baby-chicks-need-to-die-before-you-fix-your-in-app-browser-viewport/
HARVARD
Lee Martin | Sciencx Tuesday February 2, 2021 » Instagram, How many baby chicks need to die before you fix your in-app browser viewport?., viewed 2022-12-02T20:53:17+00:00,<https://www.scien.cx/2021/02/02/instagram-how-many-baby-chicks-need-to-die-before-you-fix-your-in-app-browser-viewport/>
VANCOUVER
Lee Martin | Sciencx - » Instagram, How many baby chicks need to die before you fix your in-app browser viewport?. [Internet]. [Accessed 2022-12-02T20:53:17+00:00]. Available from: https://www.scien.cx/2021/02/02/instagram-how-many-baby-chicks-need-to-die-before-you-fix-your-in-app-browser-viewport/
CHICAGO
" » Instagram, How many baby chicks need to die before you fix your in-app browser viewport?." Lee Martin | Sciencx - Accessed 2022-12-02T20:53:17+00:00. https://www.scien.cx/2021/02/02/instagram-how-many-baby-chicks-need-to-die-before-you-fix-your-in-app-browser-viewport/
IEEE
" » Instagram, How many baby chicks need to die before you fix your in-app browser viewport?." Lee Martin | Sciencx [Online]. Available: https://www.scien.cx/2021/02/02/instagram-how-many-baby-chicks-need-to-die-before-you-fix-your-in-app-browser-viewport/. [Accessed: 2022-12-02T20:53:17+00:00]
rf:citation
» Instagram, How many baby chicks need to die before you fix your in-app browser viewport? | Lee Martin | Sciencx | https://www.scien.cx/2021/02/02/instagram-how-many-baby-chicks-need-to-die-before-you-fix-your-in-app-browser-viewport/ | 2022-12-02T20:53:17+00:00
https://github.com/addpipe/simple-recorderjs-demo