[Small Program] Several compatibility issues in front-end development of WeChat H5 pages:

---

1. The ios side is compatible with the input cursor height

[Problem] The cursor of the input input box is displayed on the Android phone without any problem, but when the input is clicked on the Apple phone , the height of the cursor is the same as the height of the parent box. For example, in the picture below, the left picture is the normally expected input box cursor, and the right is the ios input cursor.

[Analysis] Usually we are used to using the height attribute to set the height between lines and the line-height attribute to set the distance between lines (line height). When clicking input, the height of the cursor will automatically be the same as the height of the parent box. (Google Chrome's design principle, another possibility is that when there is no content, the height of the cursor is equal to the value of the line-height of the input. When there is content, the height of the cursor from the top of the input to the bottom of the text [ ] and the
line 解决办法height High line-height content is expanded with padding

2. When the WeChat h5 page on the ios side slides up and down, it freezes and the page is missing

[Problem] On the ios side, when sliding the page up and down, if the height of the page exceeds one screen, there will be obvious freezes, and some content on the page is not displayed completely, such as the picture below, the right picture is a normal page, and the side is ios After sliding up and down, Caton causes the lower part of the picture on the left to be lost.

[Analysis] Generally speaking, the kernel of the WeChat browser, Android uses the built-in WebKit kernel, and iOS uses the built-in Safari kernel due to Apple's reasons, and Safari uses native controls to implement overflow-scrolling. For a webpage with -webkit-overflow-scrolling, a UIScrollView will be created and a sublayer will be provided for the rendering module to use. [To be verified]
[ 解决办法] Just add the following line of code in the public style

*{
    
    
	-webkit-overflow-scrolling: touch;
}

But, this attribute has bugs. For example, if you have a node with absolute positioning set in your page, the display of the node will be messed up, and of course there will be some other bugs.

Expand knowledge: What is -webkit-overflow-scrolling: touch?
This is defined on MDN:
The -webkit-overflow-scrolling property controls whether the element uses the scrolling bounce effect on mobile devices. auto: Use normal scrolling, when the finger is removed from the touch screen, the scrolling will stop immediately. touch: Use scrolling with rebound effect, when the finger is removed from the touch screen, the content will continue to maintain the scrolling effect for a period of time. The speed and duration of continued scrolling are proportional to the intensity of the scrolling gesture. It also creates a new stack context.

3. The ios keyboard wakes up, and the page does not return to its original position after the keyboard is put away.

[Problem] After inputting content, the soft keyboard pops up, and the page content moves up as a whole, but when the keyboard is put away, the page content does not slide down

[Analysis] When the element with fixed positioning is focused on the input box in the element, the soft keyboard that pops up occupies a place. When the focus is lost, the soft keyboard disappears, but it still occupies the place, causing the input box to be unable to input again. When the focus is lost, an event is given
[ 解决办法]

<div class="list-warp">
  <div class="title"><span>投·被保险人姓名</span></div>
   <div class="content">
     <input class="content-input" 
            placeholder="请输入姓名"
            v-model="peopleList.name"
           @focus="changefocus()"
           @blur.prevent="changeBlur()"/>    
   </div>
</div>

changeBlur(){
    
    
   let u = navigator.userAgent, app = navigator.appVersion;
   let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
   if(isIOS){
    
    
      setTimeout(() => {
         const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
         window.scrollTo(0, Math.max(scrollHeight - 1, 0))
       }, 200)
    }
} 

Expand knowledge: the position: fixed element is in ios, and it will be pushed up when the keyboard is put away, especially the third-party keyboard

4. The Android pop-up keyboard covers the text box

[Problem] Android WeChat H5 pops up the soft keyboard and blocks the input input box. The left picture below is the appearance when the keyboard is expected to be activated, and the right is the actual appearance of the keyboard. 【 】Add focus events

to 解决办法the input and textarea tags, as follows, first judge whether it is correct The operation under the Android phone, of course, does not need to judge the model, Document object properties and methods, setTimeout is delayed by 0.5 seconds, because calling the Android keyboard is a little slow, so if the processing is not delayed, the scrolling will be invalid

changefocus(){
    
    
  let u = navigator.userAgent, app = navigator.appVersion;
  let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
  if(isAndroid){
    
    
    setTimeout(function() {
    
    
     document.activeElement.scrollIntoViewIfNeeded();
     document.activeElement.scrollIntoView();
    }, 500);       
  }
}, 

Expand knowledge:
The Element.scrollIntoView() method scrolls the current element into the visible area of ​​the browser window. The Element.scrollIntoViewIfNeeded() method is also used to scroll elements that are not in the visible area of ​​the browser window to the visible area of ​​the browser window. but if the element is already within the visible area of ​​the browser window, no scrolling will occur

5. Routing in Vue uses the hash mode. When developing WeChat H5 page sharing, the sharing is successfully set on Android, but the sharing on ios is abnormal

[Problem] It is normal to click to share the current page of ios with friends. If it is shared twice, it will jump to the home page; when using vue router to jump to the second page and share it, the sharing setting fails; the above Android shares are all Normally

[Analysis] jssdk is signed by the backend and verified by the frontend, but sometimes cross-domain, ios will automatically bring from=singlemessage&isappinstalled=0 and other parameters after sharing. The parameters of sharing Moments are not the same. It seems that the system has different parameters It's different, but you can't get the following parameters every time you get the url
【解决办法】
(1) You can use the page this.$router.push to jump to window.location.href instead of using the routing jump. In this way, the address in the address bar is the same as the address of the current page, and can be shared successfully (when there are not many pages suitable for sharing, use it as a single page, so refresh the page and jump, or...) (2) Save the entry
address Locally, take it out when you need to get the signature. Note: sessionStorage.setItem('href',href); Only save it when you first enter the single application! 【This method is not verified】

Off-topic: If you can use the page written in a small program, try to use the small program. H5 development may not see the problem when looking at the page effect in the WeChat developer tool, because the soft keyboard cannot be invoked. To avoid frequent online publishing, you can use peanut shells or idcfengye to penetrate the intranet, build a development environment h5 page that can be accessed through a domain name, and check the effect on your mobile phone. By the way, WeChat has a built-in browser caching mechanism. It will cause the code (especially js) just submitted to take about half an hour to take effect.