Project Difficulty: Solve the problem of disordered page style and layout after the soft keyboard is activated in IOS

1. Background 

Demand background:

    Developed a questionnaire system similar to Questionnaire Star and refactored the project. The first development was for the  PC side . The most troublesome point was nothing more than the compatibility and adaptability of IE browsers;

    After that, the project manager asked to develop  the mobile terminal  simultaneously. Simply put, it is to write H5 pages, which will be embedded in App applications, office systems or small programs. At the beginning, the  development and testing were carried out in the Edge browser simulator  . , because I am also developing a mobile project for the first time, so I have no experience (later I learned that I should try to avoid using fixed positioning, because IOS will have compatibility issues), but there is no way, many places in the project have used fixed Therefore, after the project is developed and deployed using Jenkins to package and deploy, it encounters various strange problems when testing it on the real Apple device of the IOS system. .

---

    The first and biggest problem is:

        1. When the input box focuses and calls  the soft keyboard  to input the content, that is, after the soft keyboard is put away, the layout and typesetting of the entire page are messed up, and when you want to select the input box again, you find that it cannot be selected , in fact, the entire page has fallen off at this time, and if you want to select the focus again, you have to click on it. .

---

2. The solution process

Then anyway, it is all kinds of Baidu, all kinds of advice from the big guys:

JSBridge :  Alipay H5 open document

---

Baidu's solution:

Solve the bug that when the H5 IOS input is focused, the entire page is pushed up, but the page does not move down when the keyboard is closed

When the soft keyboard is closed under IOS, the page is pushed up, the ultimate solution that cannot be restored

uniapp development project :

Remember once the h5 page ios evokes the soft keyboard to step on the pit-Nuggets

The solution to the problem of moving up the page when the input component in UniApp pops up the soft keyboard on the IOS device, and the pop-up soft keyboard fixed on the top of the soft keyboard after the input component is focused, and returns to the original position after losing focus. _ios popup keyboard interface move up

---

I have tried all the strange ways above, but in the end it is still useless:

3. Solutions

Finally, after consulting the bosses in the company, it is basically OK~

-webkit-backface-visibility_Notebooks_Design Academy

Combine ➕ : -webkit-transform: translate3d(0,0,0)  

Configure it globally in App.vue and you're done!

(Of course, it is best to judge whether to add attributes for the IOS system, because it may affect the Android system~)

---

4. Final code

<script>
export default {
	mounted() {
		// 判断是否为IOS系统以添加CSS属性
		let u = navigator.userAgent;
		let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
		if (isIOS) {
			let iosApp = document.getElementById('app');
			iosApp.style.backfaceVisibility = 'hidden';
			iosApp.style.transform = 'translate3d(0,0,0)';
		}
	},
};
</script>

---

Perfect! ! After class~