应用浏览器中的 Instagram 正在转移所有点击事件

Question

在 iPhone 的 Instagram 应用浏览器（应用内）上，如果您打开一个包含任何类型的html inputs的网站，就会发生一些奇怪的事情。

一开始一切正常，但是一旦您点击输入并输入某些内容（并且键盘已打开），关闭键盘后您将无法再单击任何内容，因为所有buttons / inputs / elements都可以在不同的位置单击比他们显示的位置（按钮显示在原来的 100 像素位置，但点击事件现在是 50 像素）。

看起来键盘打开后整个位置计算都上移了（因为键盘将整个body向上推）

如何甚至开始调试这样的东西？

Answer 1

老实说，我去过那里。 无法调试应用内浏览器（您可以尝试在 iphone 设备上与 MAC 中的 Chrome 进行镜像，但最终会失败），但我尝试过但没有成功。

事实证明，在研究了类似问题之后，我的客户端的 WP ENGINE 存在缓存问题和一些禁用的功能。 他们能够通过在 nginx 设置上允许一些参数来修复它，然后 In App 浏览器不再卡住。

我知道每个问题都不同，但目前我还没有找到调试 In-App 浏览器的方法。

Answer 2

我不能专门与 iOS 交谈，但肯定有远程调试的方法。

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工具，但它适用于 Socket.IO 连接。

我喜欢使用的另一个工具是 Fiddler。 虽然它不会帮助您解决 DOM 问题，但如果您需要在奇怪的设备上调试网络内容，它是完美的。 它充当代理服务器，可以拦截您的所有连接，包括 HTTPS。 https://www.telerik.com/fiddler

Answer 3

事实证明，它是一个fixed的 position 并且不受支持，这意味着当键盘关闭时，系统将推回整个视图但单击事件保持不变（因为当您打开键盘时它被推上）。

因此，我们没有让它成为一个absolute的模态，它有它自己的问题，而是保持它fixed ，但是，我们自己进行向上/向下推。

我们可以在input unfocused时将屏幕向下推，但是如果用户单击下一个字段，您会得到不需要的行为，因此我们创建了一个基于延迟的机器，如下所示：

var isfocused=0;
var focusTimer=0;

$("input").blur(function() {
      isfocused=0;
      focusTimer = setTimeout(focusDone, 150);
});

$("input").focus(function(){
      isfocused=1;
});

function focusDone(){
    if(isfocused===0)
        $(window).scrollTop(0,0);
    clearTimeout(focusTimer);
}

这在社交浏览器上效果很好，具有固定位置的模式，其中有输入。