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
VUE implements token login verification
This article example shares the specific code of ...
Detailed graphic tutorial on installing and uninstalling Tomcat8 on Linux
[ Linux installation of Tomcat8 ] Uninstall Tomca...
MySQL 8.0.11 installation and configuration method graphic tutorial
The installation and configuration methods of MyS...
How to create a database in navicat 8 for mysql
When developing a website, you often need to use ...
Three ways to avoid duplicate insertion of data in MySql
Preface In the case of primary key conflict or un...
Introduction to new features of MySQL 8.0.11
MySQL 8.0 for Windows v8.0.11 official free versi...
Summary of common functions and usage methods of WeChat applet development
Here, I have mainly sorted out some commonly used...
How to install Solr 8.6.2 in Docker and configure the Chinese word segmenter
1. Environment version Docker version 19.03.12 ce...
Detailed analysis of binlog_format mode and configuration in MySQL
There are three main ways of MySQL replication: S...
Implementation of mysql decimal data type conversion
Recently, I encountered a database with the follo...
Summary of MySQL 8.0 Online DDL Quick Column Addition
Table of contents Problem Description Historical ...
10 reasons why Linux is becoming more and more popular
Linux has been loved by more and more users. Why ...
Problems encountered in using MySQL
Here are some problems encountered in the use of ...
vmware virtual machine ubuntu18.04 installation tutorial
Installation Steps 1. Create a virtual machine 2....
A practical guide to Vue project first screen performance optimization components
Table of contents Vue first screen performance op...