09月06日科技常识：原来 CSS 这样写是会让 App 崩溃的

2024-10-11 11:18:29

导读摘要今天小编跟大家讲解下有关原来 CSS 这样写是会让 App 崩溃的，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关原来...

摘要今天小编跟大家讲解下有关原来 CSS 这样写是会让 App 崩溃的，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关原来 CSS

今天小编跟大家讲解下有关原来 CSS 这样写是会让 App 崩溃的，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关原来 CSS 这样写是会让 App 崩溃的的相关资料，希望小伙伴们看了有所帮助。

先废话一下

之前在自己的个人公众号中提到了一篇利用 css 的方式进行 XSS 攻击当时有朋友跟我说让我去获取那个网站的 cookie 再然后进入那个网站的后台去玩。然而技术能力实在有限搞不了这些东西只是觉得那个网站没有适当过滤 html 标签是一件很危险的事情。

不过今天要说的 css 代码真的是让 app 崩溃了至于信不信看图就知道咯。

故事背景

昨晚在被窝中的我突然收到一封邮件大概内容是说因为 css 的问题让 app 挂了。当时在想怎么样的 css 如此牛逼居然让 app 挂了！于是掏出手机按照邮件中提示的 URL 打开看了一下我只想说这代码额算了还是不吐槽了其实要是我写的话肯定会更烂。

虽然是来自其他部门的一个页面但作为公司的一员怎么能不为公司的产品考虑呢。听起来感觉像是在拍马屁其实真的是因为我最好奇的是出现 bug 的原因是什么当然肯定也是关心产品的啦。

于是第二天一早就到公司开始排雷……

大概的过程

首先我仔细看了一下代码从最初怀疑是animation的性能影响低端设备运行开始排查。结果发现这个所谓的性能问题其实也并没那么厉害一时也找不到头绪然后源文件又不是在我们自己这边只好打开花瓶抓 css 文件然后替换后用删除法一点点查。

最后在储大师的提点以及提供的一个 URL 来看居然是rem导致的。https://bugs.chromium.org/p/chromium/issues/detail?id=364222

这个网址大家应该都知道是专门看 bug 的当然也可以提 bug 啦。

@-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;}<div class="anim"></div>

刚开始看到这段 css 代码的时候我在想啊这个好像也没什么问题啊不就是通过:before这个伪元素来做一个animation动画效果么然后使用了rem这个单位量。

反正是百思不得其解。

还是找测试机继续删除那个有问题的页面代码吧。先是用了三星的发现没问题接着用了小米的果然奔溃了。看了一下版本三星的是 Android 4.4.2 小米的是 Android 4.4.4 难道是版本的关系

总之在最开始那块有动画效果的部分排查了很久都没找到问题。最后还是回到那个已经报了 bug 的页面上看具体说明。

突然想到这个页面中用了:before来做动画莫非我们的这个页面中也有于是一搜结果真的有！

赶紧我们自己页面上的这段代码拿过来做尝试终于找到你了。赶紧回邮件告诉对方……

再次感谢储大师的提点让我有机会了解到未曾了解到的一个问题。

简单分析

这个 bug 在目前桌面端的设备中已经被处理掉了按照 bug list 页面上说的当时发现这个 bug 是在

Chrome Version: 34.0.1847.116 (Official Build 260972) m

这个版本上的并且各系统都有。然而现在的 Chrome 都已经是 50 以上的版本了所以桌面端完全不需要去担心了。

但是这次既然是在移动端上遇见了而且是 Android 4.4.4 这个版本虽然是在小米3 中发现但 Android 4.4.4 这个版本应该还算是比较普遍的难道真的会是这个问题。