如何在 iOS 6.1 上重现网站崩溃

Posted 2023-04-18

【中文标题】如何在 iOS 6.1 上重现网站崩溃

【英文标题】：How can I reproduce website crash on iOS 6.1

【发布时间】：2013-01-20 03:31:01

【问题描述】：

我收到了一个错误报告，称this website 在 ios 6.1 上查看时会崩溃，但我猜是 iOS 6.1 附带的浏览器版本比操作系统本身更相关。我没有任何 iOS 设备，所以我不确定如何重现/调查该问题。

是否有人对我如何在 Windows/Ubunutu 上重现此问题提出建议？我试过http://www.browserstack.com/，但他们提供的最新版本是iOS 6.0。

万一有人知道崩溃发生的原因，请告诉我。主页上有嵌入的YouTube视频，听说flash和iOS不合群，不知道是不是这个原因？

【问题讨论】：

您可以在机器上安装 Safari 并启用开发者模式。在此之后尝试使用用户代理 ios 6.1 打开网站（在启用开发者模式后出现的开发选项卡下）

忘记闪存。如果你做对了，你实际上并没有把 flash 放在网站上，而是一段代码，它检测浏览器和设备以选择要显示的内容。尝试 saury 所说的或从 @nizx 获得更详细的解释，这是正确的做法。

问题现在似乎已经修复（不再崩溃，而不是 10 分钟前）。如果您找到了原因，请向 Apple 报告该错误。 :)

【参考方案1】：

更新

我能够重现该问题，并从控制台日志中获取此信息：

2 月 14 日 12:45:54 Aaron-Bragers-iPhone MobileSafari[45279]： CGAffineTransformInvert：奇异矩阵。 2月14日 12:45:56 Aaron-Bragers-iPhone MobileSafari[45279] : CGAffineTransformInvert：奇异矩阵。 2月14日 12:45:56 Aaron-Bragers-iPhone MobileSafari[45279] : CGAffineTransformInvert：奇异矩阵。 2月14日 12:45:57 Aaron-Bragers-iPhone MobileSafari[45279] : CGAffineTransformInvert：奇异矩阵。 2月14日 12:45:59 Aaron-Bragers-iPhone ReportCrash[46048]：不保存 Jetsam 日志，因为没有来自内核的数据。 2月14日 12:45:59 Aaron-Bragers-iPhone UserEventAgent[13]：jetsam：内核 正在创建的终止快照 2 月 14 日 12:45:59 Aaron-Bragers-iPhone MobileSafari[45279] : CGAffineTransformInvert：奇异矩阵。 2月14日 12:46:04 Aaron-Bragers-iPhone MobileSafari[45279] : CGAffineTransformInvert：奇异矩阵。 2月14日 12:46:04 Aaron-Bragers-iPhone MobileSafari[45279] : CGAffineTransformInvert：奇异矩阵。 2月14日 12:46:05 Aaron-Bragers-iPhone MobileSafari[45279] : CGAffineTransformInvert：奇异矩阵。 2月14日 12:46:06 Aaron-Bragers-iPhone MobileSafari[45279] : CGAffineTransformInvert：奇异矩阵。

...接着是大量的内存警告。

您的网站导致内存泄漏，因此 iOS 正在关闭 Safari。看来你必须follow these instructions 才能调试它。

---

窗口

您无法尝试在 Windows 中重现它。唯一的选择是download Safari 5 for Windows，这可能会产生类似的错误。

但是，它不使用与 Mobile Safari 相同的 WebKit 构建（Windows 版 Safari 更老），因此您可能需要借用朋友的 Mac 并继续操作：

Mac

1。在 iOS 模拟器中测试您的网站

获取 Xcode

如果你还没有，download Xcode from the Mac App Store。

制作一个空白项目

文件 -> 新项目。选择 Single View 应用程序（或任何其他 iOS 应用程序，没关系）。按下一步。选择任何项目名称（没关系）。按下一步，然后指定某个位置，然后按创建。

运行项目

按左上角的播放按钮，或按 Command-R，或从产品菜单中选择运行。

应用应该在模拟器中启动。

切换到 Safari

按下主页按钮（或 command-shift-H）。然后点击 Safari，导航到您的网站。

2。日志输出。

打开终端，运行tail -f /var/log/system.log | egrep 'MobileSafari'。这将向您显示所有 Mobile Safari 的日志。 （您可以删除 egrep 以查看所有日志，以防崩溃发生在 Safari 之外。）

2。重现问题

我无法让 iOS 或 Safari 在您的网站上崩溃，但您需要这样做才能调试问题。

3。查看模拟器的控制台日志了解详情

切换回终端并查看日志以了解可能导致崩溃的原因。

【讨论】：

非常感谢，不幸的是我自己和我的任何朋友都没有自己的macs

【参考方案2】：

我能够在我的 iPhone 3GS iOS 6.1 上重现该问题，它会立即崩溃，而无需对页面进行任何操作。 Web Inspector 上没有错误。使用 iOS 模拟器时，它不会崩溃，但会在设备日志中显示 MobileSafari[11079]: CGAffineTransformInvert: singular matrix.。

如果我在不与任何元素交互的情况下滚动页面，即使我按像素滚动 1，错误 singular matrix 也会在控制台上重复。

分析多次，在 iOS 模拟器上我没有看到任何 javascript 内存泄漏。所以我猜这与渲染有关。

所以我删除了样式表http://festivals.ie/static/mNga2i69LFf9ezK2IBanFA9rPb7jjsGzC6PNOP5MjO1.css 进行检查，矩阵错误停止了。所以这证实了我的担忧。

接下来我们需要能够分开，是什么导致了这种情况。

我分析了页面并滚动了页面，等待singular matrix 错误，然后停止分析。这是我得到的：

一个 320 x 75 像素的重绘区域，我猜它是顶部标题。

所以我使用网络检查器删除了<div class="navbar navbar-fixed-top top-nav">，不再出现singular matrix 错误。

我尝试启用和禁用与 div 匹配的每种样式，唯一有任何区别的是position: fixed，但它可能是固定 div 内部的冲突。

我尝试了里面的每个元素，我发现只删除 <button> 可以解决问题。

现在我认为您可以跟踪该按钮的问题。

这是与按钮相关的css：

media="screen, projection"
mNga2i69LFf9ezK2IBanFA9rPb7jjsGzC6PNOP5MjO1.css:175
label, input, button, select, textarea 
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;


festivals.ie
media="screen, projection"
mNga2i69LFf9ezK2IBanFA9rPb7jjsGzC6PNOP5MjO1.css:21
button, input[type="button"], input[type="reset"], input[type="submit"] 
cursor: pointer;
    -webkit-appearance: button;


festivals.ie
media="screen, projection"
mNga2i69LFf9ezK2IBanFA9rPb7jjsGzC6PNOP5MjO1.css:19
button, input 
    line-height: normal;


festivals.ie
media="screen, projection"
mNga2i69LFf9ezK2IBanFA9rPb7jjsGzC6PNOP5MjO1.css:18
button, input, select, textarea 
    margin: 0;
    font-size: 100%;
    vertical-align: middle;


festivals.ie
media="screen, projection"
mNga2i69LFf9ezK2IBanFA9rPb7jjsGzC6PNOP5MjO1.css:859
* 
    margin: 0;


festivals.ie
media="screen, projection"
mNga2i69LFf9ezK2IBanFA9rPb7jjsGzC6PNOP5MjO1.css:798
::selection 
    background: #4e87e1;
    color: #ffffff;


Base Style Rules
input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button 
    -webkit-box-align: center;
    text-align: center;
    cursor: default;
    color: buttontext;
    padding: 0px 1em;
    border: 1px solid rgb(76, 76, 76);
    border-image: initial;
    background-color: rgba(255, 255, 255, 0.0078125);
    font: 11px Helvetica;
    box-sizing: border-box;


input, textarea, keygen, select, button, isindex 
    margin: 0em;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: -webkit-auto;


button 
    -webkit-appearance: button;

我希望这很有用，因为我花了很长时间才到这里。

【讨论】：

@Vitim.us 非常彻底； +1。一旦发现有问题的代码，您应该在bugreport.apple.com 上提交报告，因为 CSS 在任何情况下都不应该让浏览器崩溃。

我删除了按钮，但问题仍然存在。删除按钮后，我确保清除 iPhone 浏览器缓存。所以看起来按钮不是（唯一的）问题

【参考方案3】：

您需要在 iOS 设备上进行检查。 iOS 不支持 flash

我认为这不会发生在安装在 Windows 或其他平台上的 safari 中。我认为这是与 iOS 相关的特定问题。

注意：

我在您的网站上遇到了崩溃。当我使用您的网站并单击前进、后退箭头 5 到 6 次时。当我点击图片后，它会转到 festivals.ie/festival/map 类似的页面并崩溃。

编辑：

在我的 mac 上安装的 safari 上进行了相同的测试。在上述情况下没有发现崩溃。所以我认为这是一个 iOS 特定的崩溃。 （我认为与记忆或类似的东西有关）。

【讨论】：

festivals.ie/festival/map 的页面显示的是 Google 地图，因此该页面上没有 Flash。然而，它可能确实在客户端使用了相当多的内存，尤其是在显示大量地图标记时

【参考方案4】：

您需要注册为 Apple Developer 才能使用模拟器并使用 Web 检查器进行调试。

您可以尝试以下链接了解更多信息。

http://webdesign.tutsplus.com/tutorials/workflow-tutorials/quick-tip-using-web-inspector-to-debug-mobile-safari/

【参考方案5】：

问题是由下面注释掉的 CSS 属性引起的

html 
  background: url(../images/responsive/bg.svg) no-repeat center center fixed;

/* 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
*/

  outline: 0!important;

删除这些属性后，问题不再出现

【讨论】：

这太奇怪了，而且肯定是一个错误。当我加载我的网站时，我遇到了类似的问题，即 Safari（移动设备和桌面设备）崩溃。想知道它是否与注释样式有关。 ***.com/questions/15987787/…

哇 - 所以我禁用了我的整个样式表，并且该网站不再使 Safari 崩溃。但是，我知道这个问题没有被注释掉，因为我使用的是一个没有任何 cmets 的缩小的 css 文件。因此，常规样式声明中的某些内容实际上使 Safari 崩溃。这一定是 Safari 错误。

@JoelGlovier 我发现哪个规则是蛮力负责的。具体来说，删除一半的样式。如果错误仍然存​​在，则您知道问题出在剩余样式中，否则问题出在已删除样式中。包括包含错误的一半，然后删除其中的一半。重复此过程，直到您确定负责的规则。不是很有趣，但它对我有用（最终）

所以我最终将问题缩小到转换规则，特别是使用“全部”转换范围使其崩溃，当我将“全部”更改为“颜色”时（因为这就是我真正的需要转换）它停止了浏览器崩溃。

我也遇到了 transition 规则的问题，但在我的情况下，它在 Chrome ***.com/questions/14468781/… 中引起了问题