CSS代码引发App崩溃：rem引发的意外Bug揭秘

本文主要探讨了一种意外情况，即CSS代码可能导致移动应用（app）崩溃的现象。作者以自身经历为背景，分享了一次收到邮件通知，指出由于CSS错误引发的app问题。起初，这个CSS代码涉及了一个名为`@-webkit-keyframescrashChrome`的动画，它定义了一个名为`.anim`的类中的动画效果： ```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`单位的使用，尤其是在`translateX(0rem)`这一行，可能导致在某些特定的老旧或性能较低的Webkit浏览器（如早期版本的Chrome）上出现渲染问题，从而触发app崩溃。这种情况下，`rem`值可能没有正确地转化为像素值，从而超出设备的渲染能力。 文章中提到，作者先是怀疑是动画性能问题，但经过深入排查，发现真正的问题出在rem单位的处理上。他们查看了Chromium项目的bug报告（<https://bugs.chromium.org/p/chromium/issues/detail?id=364222>），这是一个关于WebKit浏览器对rem单位支持的已知问题。作者使用了`delete`方法来逐个检查CSS文件，最终确认了rem引起的问题。 这个问题提醒开发者在编写CSS时要特别注意兼容性，尤其是在处理单位转换和动画效果时，确保在各种设备和浏览器上都能正常工作，避免因意外的CSS代码导致应用意外崩溃。同时，这篇文章也展示了开发者对于代码问题的好奇心和解决问题的决心，以及跨部门合作以解决产品问题的重要性。