CSS错误引发App崩溃：rem引发的意外Bug

本文主要讨论了一种罕见的CSS编写方式，可能导致应用程序（app）崩溃的情况。作者分享了自己的一次亲身经历，他在个人公众号上提到过利用CSS进行XSS攻击的话题，但并未深入研究。然而，这次事件引发了作者对一个因CSS代码引发app崩溃的关注。 邮件中的事件揭示了一个特定CSS代码段，涉及到`@-webkit-keyframes`和`.anim`类的动画效果，特别是使用`rem`单位。当CSS代码包含以下部分时： ```css @-webkit-keyframes crashChrome { 0% { -webkit-transform: translateX(0rem); } } .anim:before { content: ""; width: 3rem; height: 3rem; border-radius: 3rem; position: absolute; left: 5rem; top: 5rem; background-color: #06839f; -webkit-animation: crashChrome; } ``` 浏览器在处理这些动画时，特别是对于低端设备，可能会遇到性能瓶颈。问题的关键在于`rem`单位，它依赖于视口的像素大小，当动画的尺寸计算依赖于视口时，可能会导致在某些条件下渲染或计算错误，进而引发app崩溃。 作者通过逐步排查，包括查看源文件、使用开发者工具（如花瓶抓取CSS文件）和查阅Chromium项目的bug报告（<https://bugs.chromium.org/p/chromium/issues/detail?id=364222>），最终确定了问题所在。这表明，在实际开发中，开发者需要谨慎处理动画和单位选择，尤其是在处理跨设备兼容性和性能优化时，避免类似问题的发生。 这篇文章提醒开发人员注意CSS的潜在风险，并强调了细致的代码审查和性能测试的重要性，以确保应用程序的稳定性和用户体验。