React 移动端开发样式问题记录

React 移动端开发样式问题记录

1、 input 输入框无法聚焦输入文字

将样式中的 user-select: none; 更改为 user-select: text !important;

2、 背景设置 transparent 无效

经过 IOS 真机测试，transparent 在移动端支持不好，
将 transparent 更改为 rgba(0, 0, 0, 0) 等效透明效果即可

3、 设置了 backdrop-filter: blur(20px) 后，模糊效果出现位置偏移情况

box-shadow 属性的位置偏移值影响了 backdrop-filter 的位置，
可以将 box-shadow 的偏移设置为 0，
或者直接取消 box-shadow，设置为 box-shadow: none; 即可

4、 设置了 background-attachment: fixed 后，背景图片位置不固定

background-attachment: fixed; 对移动端支持也不友好，
可以另外设置一个 <img /> 组件来充当背景图片，
将 <img /> 设置为 position: flixed; 即可达到相同效果。

5、 可以借助 animejs 等插件来辅助自己开发动画效果