The pitfall record of the rubber rebound effect of iOS WeChat H5 page
Business requirementsOne of the projects I have developed recently is an H5 page related to WeChat official accounts. The page display is normal on the Android WeChat, but there are some unexpected bugs on the iOS WeChat. This time, we mainly record the rubber rebound (rubber band effect) problem of mobile H5 pages on iOS, hoping to help students who encounter similar problems. 🐕Solution 1: Use inobounce.jsinobounce.js github address Introduce inbounce.js in the header tag of the HTML main page, that is. After this file is introduced, the entire page on iOS cannot be slid or scrolled. If you want the scrolling element to achieve the scrolling effect, you need to set a fixed height for the scrolling area, that is, height, max-height, and also set overflow: auto to achieve page sliding. To prevent page scrolling from freezing on iOS, you need to set the -webkit-overflow-scrolling: touch property for the scrolling area.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>inobounce</title>
<script src="inobounce.js"></script>
<style>
ul {
height: 115px;
border: 1px solid gray;
overflow:auto;
-webkit-overflow-scrolling: touch;
}
</style>
</head>
<body>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
<li>List Item 7</li>
<li>List Item 8</li>
<li>List Item 9</li>
<li>List Item 10</li>
</ul>
</body>
</html>
🐒 Solution 2: CSS style processing (recommended)By chance, when I opened the H5 activity pages of some public accounts on the iOS side, there was no so-called rubber rebound effect. So I wondered whether this effect could be used to solve the rubber rebound effect produced by the iOS web pages. Finally, this method can be used to fix the page on iOS without producing the rubber rebound effect. The rubber band effect has been resolved on devices with system version iOS13+. It has not been tried on devices with system version iOS12+. We plan to find an Apple phone with iOS12+ for further testing and then supplement the test results. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>iOS Eraser Rebound</title> </head> <body> <!-- Content area --> <div id="app"></div> </body> </html> Main CSS code:
/* Initialization */
* {
margin: 0;
padding: 0;
}
/* Basic style */
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
box-sizing: border-box;
position: relative;
}
/* scroll out of range */
#app {
width: 100%;
height: 100%;
overflow-y: auto;
}
🐬Summary:In general, I have tried both solutions in actual development. Solution 1 can perfectly solve the rubber rebound effect when browsing H5 web pages in WeChat. When the H5 page is authorized to jump on the iOS WeChat, there will be a navigation bar at the bottom. At this time, the navigation bar may also be covered, and clicking the buttons at both ends of the navigation bar will not respond. When opening an H5 page in Safari, the address bar at the top and the menu bar at the bottom of the webpage will be blocked to a certain extent, and the experience is not very ideal. Ultimately, this solution was passed. Solution 2 is what I use in my actual work, and the rebound effect has been improved to a certain extent. The experience effect has been greatly improved compared with Solution 1. If the page has WeChat authorization and the page path jumps, there will be an additional navigation bar at the bottom of the web page opened by WeChat on iOS. Similarly, there will be no similar navigation bar on WeChat on Android. If there is no WeChat authorization and page jump, both solutions are optional; if there is WeChat authorization, it is recommended to use solution 2. This is the end of this article about the eraser rebound effect of the iOS WeChat H5 page. For more relevant iOS WeChat H5 page eraser rebound content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! |
<<: How to configure virtual user login in vsftpd
>>: How to unify the character set on an existing mysql database
Recommend
VMware Tools installation and configuration tutorial for Ubuntu
Some time ago, the blogger installed the Ubuntu s...
How to configure the My.ini file when installing MySQL5.6.17 database
I recently used the MySql database when developin...
Detailed steps to install Nginx on Linux
1. Nginx installation steps 1.1 Official website ...
Detailed explanation of Linux curl form login or submission and cookie usage
Preface This article mainly explains how to imple...
In-depth understanding of MySQL slow query log
Table of contents What is the slow query log? How...
Various ways to achieve the hollowing effect of CSS3 mask layer
This article introduces 4 methods to achieve mask...
Notes on configuring multiple proxies using vue projects
In the development process of Vue project, for th...
How to solve the background tiling and border breaking of CSS style div or li in IE6
The solution to the background tiling or border br...
Detailed explanation of selinux basic configuration tutorial in Linux
selinux ( Security-Enhanced Linux) is a Linux ker...
Detailed explanation of CSS elastic box flex-grow, flex-shrink, flex-basis
The functions of the three attributes flex-grow, ...
A Different Kind of "Cancel" Button
The “Cancel” button is not part of the necessary ...
The images in HTML are directly replaced by base64 encoded strings
Recently, I came across a webpage that had images ...
Nginx 502 Bad Gateway Error Causes and Solutions
I have encountered the Nginx 502 Bad Gateway erro...
How to handle concurrent updates of MySQL data
Will UPDATE lock? Will the SQL statement be locke...
Detailed tutorial on installing mysql on centos 6.9
1. Confirm whether MySQL has been installed. You ...