如何确定iOS Safari中“样式无效”的原因？

时间：2016-12-16 22:27:54

标签： css angularjs safari mobile-safari angular-material

在iOS上滚动时，我正在追逐性能问题。在touchstart和touchend上，Safari无效，然后重新计算样式，这会在滚动响应之前导致轻微延迟。 Safari的工具有一个“启动器”列，但在我的测试中它是空白的。

我试过了：

  • 在滚动元素上应用will-change: transform;或transform: translateZ(0);。这对Chrome很有帮助，但对iOS Safari没有任何帮助。分析器仍然报告正在重新计算样式。
  • 从DOM中删除具有position: fixed;
    • 的所有元素
  • 检查探查器报告的每行Javascript（我的测试中只是jQuery和Angular核心代码），看看它们是否在Paul Irish's list of things that force layout/reflow
  • 要在Android上重现它，我可以使用Chrome的恒星开发工具，但没有成功。该问题仅影响iOS Safari，只能从桌面Safari调试。

如何确定导致我的样式在iOS Safari中失效的原因？

Javascript timelines Layout timelines

1 个答案:

答案 0 :(得分：2)

当我调试类似的问题时，这对我有用。

  1. 获取您要查看的活动的开始时间。在屏幕截图的视图中，应位于倒数第二列。
  2. 点击＆＃34; Events＆＃34;旁边的标签;选项卡，名为＆＃34;框架＆＃34;。
  3. 查找匹配开始时间最近的帧。 （有时它不准确）
  4. 通过展开框架，您可以查看在您正在查看的事件之前/之后发生的事件。在最后一栏＆＃34;位置＆＃34;你可以看到问题的原因。如果已填写，您可以单击右箭头查看导致它的行。 但它并不总是在列中有一些东西。我必须先查看之前的事件，试图找出问题所在。

    5. 它并不完美，但我已经能够调试我用这种方法遇到的问题。希望这有帮助！

相关问题
最新问题