Menu
Instagram released (at some point this year) an update on their in-app browser (webview) that at least in iOS, breaks most sites.
The attached image is the website opened after clicking the "Learn more" on an Ad, but has the same behavior also on Profile Bio links.
The problem? It seems the top bar is an overlay on the website, making most navigations for mobile (hamburger icon on top left corner) unusable/unclickable and/or hidden.
The innerHeight is the same as screen.height. As answered at How to adjust html/css layout for instagram in-app browser? we can sniff the user agent of the webview.
Unsure if they will fix it at some point, but seems that any padding-top kind of solution would break if they do.
359
“In App Browser” is nothing but a web view that provides limited browsing functionality as a sub process of the app that triggers the web view. This also facilitates the flow of information from the browser view to the parent app. Android.
Instead, whenever you open a link in Instagram and if it opens in the internal browser, tap the three-dot menu at the top right and select Open in <browser>. The link will briefly open in your default browser and then redirect to the respective application.
Unlike other Android apps that open web links in an external browser of the user's choice, Facebook opens pages in the app itself.
I have found out an alternative that in theory should not break when they release a proper fix (given tons of ads are pointing to broken sites currently:)
if (window.innerHeight === window.screen.height && navigator.userAgent.match(/instagram/i)) {
// here apply the fixes
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With