手机弹窗不卡顿
我们在艺人页面遇到的三个问题和解法。
- 一打开就滑到最底下。 手机会把焦点移到第一个按钮，而按钮常在最下面。在弹窗最上方放一个看不见的焦点元素，打开时把弹窗捲动位置归零。
- 关掉后，背后的页面跳回最上面。 用
<html>的overflow:hidden锁住页面，在 iPhone 上会清掉捲动位置。改成先记下scrollY，再用position:fixed; top:-scrollY固定 body，关闭时还原捲动位置。 - 弹窗边滑边变大变小。 用
vh/dvh设定的高度会随浏览器网址列收起而改变。弹窗里的图片改用svh（最小可视高度）或固定尺寸，并加上env(safe-area-inset-bottom)的底部留白，让按钮不被工具列挡住。
另外：弹窗里不要自动播放影片。先显示封面图，点了才播放——影片载入会撑高版面。
上线前在大小不同的 iPhone 和几款 Android 手机上都测过。