Instagram in app browser is shifting all click events

Question

On the iPhone's Instagram app browser(in app) if you open a website that includes html inputs of any type, something strange happens.

In the beginning everything is working, but once you tap an input and type something ( and the keyboard is opened), after you close the keyboard you can't click on anything anymore because all buttons/inputs/elements are clickable in a different location than where they showed ( button is showed in the original 100px location but click events are now on 50px).

It looks like after the keyboard opens the whole location calculation is shifted up(because the keyboard pushes the whole body up)

How to even begin to debug such thing ?

Answer 1

Honestly, I've been there. There is no way to debug the in-app browser (you can try on an iphone device mirroring with Chrome in MAC, but you will eventually fail), but I've tried without success.

It turned out that after digging around with similar issues, there was a caching issue and some disabled features with WP ENGINE from my client. They were able to fix it by allowing some parameters on nginx settings and then the In App browser wasn't stucked anymore.

I know every issue is different, but at this time, I haven't found a way to debug the In - App browser.

Answer 2

I can't speak to iOS specifically, but there definitely are ways to remote debug things.

My go-to for stuff like this (speaking from experience of browsers on gaming consoles) is Weinre: https://people.apache.org/~pmuellr/weinre/docs/latest/Home.html You get something similar to Chrome Developer Tools, but it works over a Socket.IO connection.

Another tool I like to use is Fiddler. While it won't help you with your DOM issues, if you ever need to debug network stuff on oddball devices, it's perfect. It serves as a proxy server and can intercept all your connections, including HTTPS. https://www.telerik.com/fiddler