iOS 或 Android 上的 WebKit 开发中的陷阱/错误

Posted

技术标签:

【中文标题】iOS 或 Android 上的 WebKit 开发中的陷阱/错误【英文标题】:Gotchas/bugs in development for WebKit on iOS or Android 【发布时间】:2011-06-07 21:01:45 【问题描述】:

我即将开发一个主要的支持触控的移动 WebKit 应用程序。

我正在寻找与标准桌面浏览器不同的任何提示或建议。

例如:

ios 上,click 事件不会通过元素向上传播到 body 元素,但某些情况除外(链接、输入、带有附加事件的元素等)。

android WebKit 不会发出多点触控事件。

我知道这些。 还有其他问题吗?你知道一些已知问题的列表吗?

【问题讨论】:

【参考方案1】:

我最近在 iPad 上的尝试中发现了一些东西。

1: iOS 4.2 版存在运行过多 document.getElementById('foo'); 的错误。将导致浏览器滞后,从而无法正确执行命令。为了解决这个问题,您需要创建变量来保存此信息,并且仅在需要时才发出选择命令。不过,iOS 的 4.3 版确实解决了这个问题,因为我已经在我的 iPad 上进行了测试。

2: 在使用定位时,我发现在创建自己的视频控制器(用于 html5)时,如果您尝试使用 position:relative 或 position:absolute 调整视频容器的大小,您将不再看到视频,而是一个漂亮的黑屏(有声音!)。为了解决这个问题,只需定位父框架就可以了。

3:如果您使用的是iScroll,请确保在加载时设置超时;特别是如果您在页面上有一些其他 javascripts,即使文档在“页面已加载”时通过以下方式加载它:

// Load iScroll when DOM content is ready.
document.addEventListener('DOMContentLoaded', loaded, false);

我已经失败了,我一生都无法弄清楚为什么我的 div 没有正确调整大小,只显示了最后两个元素之外的所有元素并且没有滚动。相反,我只是做了一个

$(function()
   //other page loaded items to do
   //the iScroller init
   setTimeout('iScrollerInit();',200);
);

它很快解决了这个问题。

4:如果您发现您的点击不太正常,我发现很多移动 SDK 的所有内容都有绑定项,因此很难实现对内容的点击通常你想要。因此,要解决此问题,您可以执行以下操作:

$("#yourId").unbind("click").click(function() 
    //what to do when clicked
);

我发现它的效果最好。

**UPDATE - Nov 2012 **: It's been a few years, and there is so much more to add to this so wanted to update the list a bit.

5: Javascript 在少数设备上仍然很昂贵(2012 年 12 月)。操作 DOM 的操作会在设备上产生大量延迟,在执行这些操作时您应该非常小心。您需要确保在 Android 旧设备和 iPhone 旧设备上测试您的移动网页,因为根据我们的指标,这些设备仍然是使用良好的设备。

6:如果您传递 HTML 以加载到设备(iPhone 应用程序或 Android 应用程序)上的网络视图中,有时您会看到高度几乎为 0。您需要做什么要做的是让您的 iPhone 或 Android 应用程序在针对 div 的实际页面上进行 Javascript 调用,以检查页面 offsetHeight,然后可以准确设置 webview 高度。

**UPDATE - Dec 2012 **: Few more awesome findings

7:我发现,当您将 div 定位为点击事件时,移动浏览器会在触发事件之前等待 300 毫秒,从而有效地造成延迟。他们这样做是为了确认点击不是双击。为了避免这种情况,您可以绑定 touchend 事件,它会立即触发!

这里有一段代码

$(document).ready(function() 
    $('#element').bind('touchstart', function(event) 
        event.stopPropagation();
        event.preventDefault();
        $(this).toggleClass('hover_heading');
    );

    $('#element').bind('touchend', function(event) 
        event.preventDefault();
        $(this).toggleClass('hover_heading');
    );
);

然后,一旦您看到您的项目发生闪烁,请使用此将其移除。

body * 
    -webkit-tap-highlight-color: rgba(0,0,0,0);  

此外,如果您想查看 google 撰写的一篇出色的文章,您可以在此处查看: - Creating Fast Buttons for Mobile Web Applications

**UPDATE - Feb 2013 **: Few more awesome findings

8:在对 CSS 文件进行版本控制并使用以下 URL 缓存它们时:mydomain.com/css/styles.css?v=123(或其他),在 android 2.2 设备上要小心更早,因为这会导致极其奇怪的行为。

根据我的发现,android 将呈现完全错误的情况,并强制 html 甚至被弄乱。遗憾的是,使用这些旧设备的最佳方法是更改​​实际文件名。

希望这些发现可以帮助其他人,因为我已经在这些问题中苦苦挣扎了几个小时,摸不着头脑:)

【讨论】:

回答问题很有趣;一年后才回来,发现你在苦苦挣扎的同一个项目(#3)你已经找到了解决方案……哎呀:x【参考方案2】:

我不知道编译列表,但我可以列出一些:

Android(当前)不支持 SVG,因为它已被关闭。 Honeycomb 即将提供支持。相比之下,iOS 启用了 SVG 支持,并且看起来运行良好。 虽然这两种浏览器都支持 CSS3 不透明度,但请务必彻底测试任何动画,因为对于更复杂的图形(尤其是多层不透明度),它们可能会非常不稳定。 在我的 javascript 中,我通常会监听“touchstart”、“touchmove”或“touchend”事件,以加快速度(“click”事件通常会引起明显的延迟)和粒度。 HTML5 功能(例如 localStorage 和新的音频和视频标签)似乎运行良好。但是,在 iPhone 上,您不能自动播放音频或视频,因为播放事件(和相应的下载)必须由用户直接触发。 涉及运动的过渡(更改 x 和 y 坐标)非常平滑。相比之下,涉及不透明度的过渡可能会非常不稳定,具体取决于所涉及的资源(有时您可能必须使用精灵来获得更平滑的感觉。)

只是一些快速观察。

【讨论】:

+1 获取有关触摸开始/移动/结束和点击之间的延迟的信息。谢谢亚当! 我发现我必须在所有触摸事件上都使用 e.preventDefault() 以防止点击也触发。【参考方案3】:

我最近写了一篇关于使用 html5 框架的一些 cotchas 的博客文章 - 在我的例子中,Sencha Touch 构建了一个封装在 PhoneGap 中的本机应用程序。

http://www.moneytoolkit.com/2011/05/the-problem-with-sencha-touch-and-phonegap/

【讨论】:

【参考方案4】:

android 中的 3D webkit 已损坏,尤其是涉及与输入字段相关的任何内容时。

http://code.google.com/p/android/issues/detail?id=13048

在某些情况下,我一直在尝试追踪随机 CSS 行为,最终归结为 -webkit-transform:translate3d(0,0,0); 在更高的元素中(以在 iOS 设备中启用硬件加速),从而使一切都失败了。

【讨论】:

【参考方案5】:

position: fixed 不起作用。

The mobile section of QuirksMode 可能会派上用场。

【讨论】:

现在支持,无论如何在 4.0.3 上。 然而,特别是在与 iOS 上的弹出式键盘结合使用时,它会非常小故障【参考方案6】:

好吧,Android 中有一个烦人的错误,即使用 Javascript 设置插入符号或选择对输入发生的位置没有实际影响。 我问了一个关于它的问题,结论是这是一个浏览器错误:(,它发生在 2.2 和 2.3 中。

Focus textarea with caret after text in Android browser

【讨论】:

【参考方案7】:

我遇到的两个“功能”:

    输入框不响应触摸事件(ontouchstart、ontouchmove、ontouchcancel),这也意味着 ontouchmove="event.preventDefault()" 不会阻止页面滚动,如果你正在创建一个固定页面,非- 可滚动的应用程序。 (可以使用隐藏的 div 创建一个笨拙的解决方法。)

    在 Android 或 iOS 上的 WebKit 中的任何表单字段上都无法使用 autofocus 或 element.focus()。该元素将收到一个光标,但不会出现键盘。我仍在尝试为此构建一种解决方法,但目前这是一个已知的、有意的限制。 :(

【讨论】:

【参考方案8】:

iOS 点击事件上的块引用不会向上传播到元素上方的正文元素,除了某些情况(链接、输入、带有附加事件的元素等)

这对我帮助很大——谢谢。

在我们的 Web 应用程序的用户测试中出现的一个 UX 问题是,iOS 选择元素的交互很糟糕。它需要 3 次单击:1) 单击选择器元素,2) 单击要选择的项目,3) 单击完成。当您单击完成时,我找不到任何事件被触发。因此,对于简短的列表,创建自己的弹出菜单或其他交互可能会更好。

【讨论】:

【参考方案9】:

溢出:android 2.3 不支持滚动

如果 div 在容器中,您必须手动让它们滚动(touchmove + scrollTop 更改)

有一个令人讨厌的错误,如果 Android 2.3 上的选择框或它们的容器在任何时候被隐藏,它们将不会激活

http://code.google.com/p/android/issues/detail?id=10280

【讨论】:

以上是关于iOS 或 Android 上的 WebKit 开发中的陷阱/错误的主要内容,如果未能解决你的问题,请参考以下文章

如何提高 Android Webkit 中的图像质量(与 iOS 相比)

是否可以在 iOS 或 Android 手机的移动 Webkit 上接收 JavaScript 中的倾斜事件? [关闭]

IOS webkit-overflow-scrolling: touch 踩坑笔记

桌面 Webkit 与 iOS Webkit 文本渲染

Chrome iOS webkit 语音识别

Android 2.3 上的 webkit 渲染问题 - 一些列表视图元素的边界模糊