Skip to content

弹幕效果遇到的坑 #13

@xtx1130

Description

@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,否则将不会计入单测覆盖度。

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions