H5 Safari浏览器输入 固定定位失效 导致页面上移

笔者在使用 uniapp开发H5 的时候碰到了很多 Safari的bug. 其中, 输入框 获取焦点导致页面上移,导致顶部内容不可见, 严重影响了用户体验, 笔者查询许久, 网上虽然方法众多, 但都不够简便, 即使有效,也有严重卡顿,无法通过测试 ,几欲放弃, 转向攻克产品, 解决不了bug, 就解决产品 ,在掰扯中忽然灵光一闪, 既然固定定位失效, 那我就让其它元素 随着页面滚动 transform , 达到一个 固定定位的显示效果

<template>
	<view class="posting" style="height: 100%;">
		<view
			class="main"
			:style="{ transform: `translateY(${videoScrollTop}px)` }"
			style="height: 100%;"
		>
			我是上面的内容，嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻
			<view>重点关注哈</view> 
			<view>重点关注哈</view> 
			<view>重点关注哈</view> 
			<view>重点关注哈</view> 
			<view>重点关注哈</view> 
			<view>重点关注哈</view> 
			<view>重点关注哈</view> 
			<view>重点关注哈</view> 
			<view>重点关注哈</view> 
			<view>重点关注哈</view> 
			<view>重点关注哈</view> 
			<view>重点关注哈</view> 
			<view>重点关注哈</view> 
			<view>重点关注哈</view> 
			<view>重点关注哈</view> 
			<view>重点关注哈</view> 
			<view>重点关注哈</view> 
		</view>
		<view class="bottom">
			<input
				v-model="value"
				placeholder="底部输入"
				type="textarea"
			/>
			<view class="sendBtn">发送</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			value: '',
			videoScrollTop: 0
		};
	},
	onLoad(e) {},
	// 我用的uni,  H5 监听页面滚动同理
	onPageScroll(res) {
		// 页面向上滚动多少, 就利用 transform 将所需的元素下移多少
		this.videoScrollTop = res.scrollTop;
	},
	methods: {
	}
};
</script>

<style lang="scss">
.bottom {
	background-color: #fff;
	z-index: 1;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	border: 1rpx solid rgb(105, 105, 105);
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 80rpx;
	input{
		padding-left: 32rpx;
	}
	.sendBtn{
		width: 150rpx;
		background-color: rgb(15, 153, 15);
		color: #fff;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>