弹幕效果遇到的坑

[xtx1130]

今天简单做了一个弹幕效果，其中遇到了几个坑，与大家分享一下，让大家少走弯路。

overflow:hidden 和 position:fixed

如果外层div设置了overflow:hidden，而内层元素用fixed定位，那么内层元素不会受到外层div overflow:hidden的影响，即使超出了div界限之外，还是会显示出来。类似于这种情况：
fixed不受overflow:hidden影响
原因是：元素设置了fixed将跳出标准文件流

animation 动画在国产手机上兼容性太差

开始做弹幕的思路是用keyframes实现的，但是发现华为手机中几乎全军覆没。手机端对css3动画支持度太低，但是浏览器端是ok的，而且非常流畅。
解决办法：利用translate实现，通过不断更改transform的translateX值，实现移动。
ps: 如果使用left实现，会造成页面不断重绘，导致手机卡顿，所以不建议使用。

移动端不支持symbol

symbol在移动端的支持度较低，所以在开发的时候要谨慎使用，因为symbol在babel-core中是默认不转义的，如果需要转义，请使用babel-polyfill或者babel-runtime。

jest在测试setTimeout等timer api时，需要用专有api

jest在进行单元测试的时候，如果代码中包含timer相关的api，请使用Timer Mocks，否则将不会计入单测覆盖度。

[suyingtao]

babel-runtime 包含了一些babel modular 的helper方法，以及 regenerator。此处应该改为babel-preset-env。