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

Question

我收到一个错误报告,当在iOS 6.1上查看时,该网站崩溃,但我猜这是iOS 6.1附带的浏览器版本,它比操作系统本身更具相关性.我没有任何iOS设备,所以我不确定如何重现/调查此问题.

有没有人建议我如何在Windows/Ubunutu上重现这个问题？我试过http://www.browserstack.com/,但他们提供的最新版本是iOS 6.0.

万一有人知道崩溃发生的原因,请告诉我.主页上有一个嵌入式YouTube视频,我听说flash和iOS都是不安的同床人,所以我想知道这可能是原因吗？

Answer 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.看起来您必须按照这些说明进行调试.

视窗

尝试在Windows中重现它并没有太多可以做的.唯一的选择是下载Safari 5 for Windows,这可能会产生类似的错误.

但是,这并不使用与Mobile Safari相同的WebKit版本(适用于Windows的Safari更老),因此您可能需要借用朋友的Mac并按照以下步骤操作:

苹果电脑

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

获取Xcode

如果您还没有,请从Mac App Store下载Xcode.

制作一个空白项目

文件 - >新项目.选择Single View应用程序(或任何其他iOS应用程序,无所谓).按Next.选择任何项目名称(无关紧要).按next,然后指定一些位置,然后按Create.

运行该项目

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

应用程序应该在模拟器中启动.

切换到Safari

按主页按钮(或命令shift-H).然后点按Safari,然后导航到您的网站.

2.记录输出.

打开终端,然后运行tail -f /var/log/system.log | egrep 'MobileSafari'.这将显示所有Mobile Safari的日志.(如果崩溃在Safari之外,您可以删除egrep以查看所有日志.)

2.重现问题

我无法在您的网站上造成iOS或Safari崩溃,但您需要这样做才能调试此问题.

3.查看模拟器的控制台日志以获取详细信息

切换回终端并查看日志以获取有关可能导致崩溃的信息.

Answer 2

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

如果我滚动页面而不与任何元素交互,则singular matrix在控制台上重复错误,即使我逐个像素滚动.

分析很多次,在iOS模拟器上我没有看到任何javascript内存泄漏.所以我猜这是渲染相关的.

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

接下来我们需要能够分离,导致这种情况的原因.

我分析了页面,滚动页面,等待singular matrix错误,并停止分析.这就是我得到的:

重绘区域为320 x 75像素,我猜是顶部标题.

所以我删除了<div class="navbar navbar-fixed-top top-nav">使用Web检查器,没有更多的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;
}

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

Answer 3

该问题是由下面注释掉的 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;
}

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