弹幕动效在 iOS 在有时不会动的BUG

[leeenx]

年货 SNS 在做弹幕的时候发现，在ip6下，弹幕有时候会不做去动画（animation）,如下：

概率大概是 50%，前一步测试会发现 mac 下的 safari 也会有这个BUG。其实这个BUG由来已久了，只是一直没遇到过，所以有点好奇它出现的原因。

BUG定位

猜想1

弹幕是用 js 动态生成并插入页面的，如下：

所以，我猜想：是不是由于 js 在页面加载未完成前插入 DOM 节点造成的BUG。于是把js插入的代码直接插到 DOM上：

测试发现ip6明显好转但却仍然会有一点点的BUG:

但是却意外发现 mac 下的 safari 情况在变糟糕：弹幕动效失效的概率超过7成。也就是当前的猜想是错的。

猜想2

弹幕动画是在页面载入时就有了，而页面在载入的时候比较耗性能，于是我猜想：页面载入完成后再使用弹幕动画可以解决BUG

页面载入有两个事件：window.load 与 DOMContentLoaded，对两个都进行测试：

DOMContentLoaded:
"interactive" == document.readyState ? showBullet(bulletData) : document.addEventListener("DOMContentLoaded", function() {
          showBullet(bulletData); // 显示弹幕
     });

---

window.load:
"complete" == document.readyState ? showBullet(bulletData) : window.addEventListener("load", function() {
          showBullet(bulletData); // 显示弹幕
     });

---

测试的结果是使用 DOMContentLoaded 不能解决弹幕BUG，而 window.onload 可以完美解决弹幕的BUG。也不是说猜想2是靠谱的！

BUG的解决方案

在确保页面加载完成后再开启弹幕动画：

window.load:
"complete" == document.readyState ? showBullet(bulletData) : window.addEventListener("load", function() {
          showBullet(bulletData); // 显示弹幕
     });

---