一些移动端H5和PC的兼容问题

1、h5在ios safari浏览器底部tabBar、顶部走马灯、一级sticky元素在滑动时出现抖动问题

原因探讨：

iOS中position:fixed 元素滑动时，如果我们的窗体元素是直接native同层的,即直接在schema上写上我们的dom,那么我们的fixed元素则是嵌套在窗体上面，而其他元素则在窗体之内。这回导致重绘不同步，出现抖动问题。

若页面滚动直接作用于 body 元素，可能导致底部固定元素（如 TabBar） ‌解决方案‌ ：将滚动限制在内部容器中，禁用 body 默认滚动，并且再包裹一层web容器，建议所有页面都如此，兼容性效果会好很多。

2、IOS输入框被手机键盘遮挡，影响用户体验；iOS 弹性滚动（bounce effect）导致页面顶部/底部出现空白。

• 方法一： 禁止页面滚动

body { overflow-y: hidden; }
.scroll-container { overflow-y: auto; }

方法二: scrollIntoView自动滚动到输入区域。 scrollIntoView({ behavior: 'smooth' })

3、PC中视频动画在部分浏览器中出现黑框解决方案：

我曾经试过ovewrflow: hidden ; 也试过border改为outline ,都无效。最后发现一个简单粗暴的方法clip 裁掉1PX clip，是修剪，剪裁的意思。配合其属性关键字rect可以实现元素的矩形裁剪效果

clip: rect(1px, calc(100% - 1px), calc(100% - 1px), 1px);

3、视频动画出现衔接卡顿

• 使用 transform 和 opacity 替代 top/left 动画，触发 GPU 渲染。

• 添加 will-change: transform; 提示浏览器优化。

• ‌帧率优化‌：

  • 用 requestAnimationFrame 替代 setTimeout 控制动画时序。

4、‌移动端键盘收起后页面未复位‌

‌问题现象‌ ：iOS键盘弹出时页面上移，但收起后页面未自动回弹‌
‌解决方案‌：

• 监听输入框失焦的事件，手动触发页面滚动到底部：

input.addEventListener('blur', () => {
window.scrollTo(0, 0);
});

有大佬有指正可以在评论区探讨（本人在祖安大区青铜升白银下路当辅助多年，为人态度十分谦虚）