移动端骨架屏加载观感差的主因是误用transform/opacity动画或rem/vw单位的background-size，而background-position是唯一稳定属性，因其仅改变渐变起点、不触发重排重绘、全程GPU合成。
移动端骨架屏加载观感差，90%是因为用了 transform 或 opacity 动画，或者 background-size 用了 rem/vw —— 这两类写法在 iOS Safari 和多数安卓 WebView 中会直接掉帧、发虚甚至动画消失。
为什么 background-position 是唯一能稳住首屏的动画属性
它只改变渐变绘制起点，不触发重排（reflow）和重绘（repaint），全程走 GPU 合成层，像素对齐精准。而 transform: translateX() 移动的是整个渲染层，在 Safari 中采样失真，边缘模糊；opacity 则根本无法呈现“扫光”结构感，只剩一片灰蒙蒙闪烁。
- 常见错误现象：光效卡在两端不动、扫条突然消失、iOS 上动画卡顿、低端安卓机掉到 10fps 以下
- 必须写单位：
background-position: -200px 0，不能写成-200 0（IE/旧 Chrome 会忽略） - 动画缓动必须用
linear，ease或ease-in-out会让光效在起止点滞留，破坏流动感 - 容器需有明确宽高，且不能依赖
display: contents或visibility: hidden，否则动画不触发
两层 linear-gradient 必须强耦合，否则光条漂移
单层 linear-gradient 只能铺色，画不出头像圆角、标题长条、段落行高等结构轮廓，更无法叠加扫光动效。必须用 background-image 显式声明两层：底层定义结构，上层是半透扫光条。
- 关键陷阱：两层必须共用同一组
background-size和background-position，否则动画错位 - 底层结构示例：
radial-gradient(circle, #f0f0f0 0%, #f0f0f0 50%, transparent 50%)（画头像） - 上层扫光示例：
linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%) -
background-size必须设为固定像素，如200px 100%；rem、vw在 iOS Safari 中完全失效 - 若改了
background-size: 300px 100%，关键帧里的background-position也得同步调成-300px 0→300px 0
移动端适配中最容易被忽略的三个硬性条件
不是“写了动画就完事”，而是每个骨架容器都必须满足这三条，否则在 iPhone 或小屏安卓上必出错位、漏白、塌陷。
立即学习“前端免费学习笔记（深入）”；
-
overflow: hidden必须加——否则光效滑出圆角区域会露白边 - 图片类占位优先用
aspect-ratio: 4/3+width: 100%，别写死height，缩放后比例才不失真 - 所有骨架块（如
.skeleton-avatar、.skeleton-card）必须设position: relative，伪元素才能准确定位 - 若用伪元素实现（推荐），
::before必须带content: ""和position: absolute，且父容器不能是display: flex无约束子项 -
background-repeat: no-repeat必须显式声明，否则重复背景导致光条跳变
真正难的不是写出一个能动的骨架，而是让所有设备上都“不动声色地动”。最常被绕开的细节是 background-size 单位兼容性和 overflow: hidden 的强制覆盖——这两点一旦漏掉，用户看到的就是卡顿、错位、闪白，而不是加载感。
