1. Position: absolute;

Problem: Position: An element that is absolute cannot be completely removed from its parent. It cannot be absolutely located within the parent, but not beyond the parent, even if the parent is not relative. Solution: If you want to make a full-screen image, create a new element under the root node body. Such as:

<body>
  <div style="position: fixed; top: 0; bottom: 0; left: 0; right: 0;">
    <img src="xxx.jpg" style="width: 100%; height: 100%;">
  </div>
</body>
Copy the code

Reference: No progress: there is no bug in ios11

2. user-select: none

*:not(input, textarea) {user-select: none; }

3. DOM.style = ‘xxx’;

Dom. style = ‘width: 10px; height: 10px’; Dom.style. width = ’10px’; DOM.style.height = ’10px’; Dom.style. cssText = ‘width: 10px; height: 10px’;

4. Wechat developed a new solution to the touch dislocation caused by the virtual keyboard on iOS

Problem: wechat developed a new pit on iOS virtual keyboard caused by the touch dislocation. The view of the element does not correspond to the actual position of the element, causing the element to be unable to trigger event resolution externally: called when the input box is out of focus

let top = target.getBoundingClientRect().top;
window.scrollTo(0.0);
window.scrollTo(0, top);
Copy the code

Touch dislocation caused by virtual keyboard on iOS

5. Smooth and smooth

Scrolling: -webkit-overflow-scrolling: touch; 2. Inobecos.js is introduced, but there are still some cases where it will fail. 2.1. Add height to the element that requires overflow: Problem 3: the text of some models whose initial position is outside the scope of the visual window can not be displayed when scrolling to the visual range. You need to click the element where the text is located to appear, but the text outside the visual range can not be displayed. Solution 3: Add transform: translateZ(0) or transform: translate3d(0, 0, 0) to the element or its parent. The scroll element cannot slide

6. The width of iframe is larger than that of the parent container

If the width of the element inside an iframe is greater than the width of the parent container, then the iframe will be stretched. But the hardest thing to understand is the *width hack

<wrapper style="overflow:auto; -webkit-overflow-scrolling:touch;">
  <iframe scrolling="no" width="100%" height="100%" style="width: 1px; min-width=100%; *width=100%; height:100%;"></iframe>
</wrapper>
Copy the code

Reference: IOS WebView Iframe width out of the screen solution

7. Tapping the input box does not evoke the soft keyboard

Click =”e => e.target.focus()” reference: Mobile input box, click for the first time can pull up the keyboard, click again can not pull up the keyboard

8. Wechat QR code cannot be recognized

< p style=”all: initial; Word-wrap: break-word! Important;”

9. It is not stable to click focus in the input box at the bottom of fringe screen and full screen

Add csSPadding -bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); Safe-area-inset-bottom iPhone

10. Video replay without picture

[Fixed] Set video to inline mode ‘playsinline’=true ‘webkit-playsinline’=true ‘x5-playsinline’=true // wechat reference: There is no

11. Video playback has progress bar and sound but no picture

Question: After playing the video -> click full screen -> End of playing -> Exit full screen -> replay the video, and add @ended=”e.target.style.display = ‘none'” to the code, Video display is none, so we changed @ended=”e.target.style.visible = ‘hidden'”

12. Images cannot be displayed in real time

Problem: For example, there is A picture P with three areas ABC. When loading the picture for the first time, area A is visible on the screen, while area B is not. Area A is immediately visible, and theoretically, area B should also be visible, but when you slide your finger over area B, area B doesn’t render, it’s blank, and you have to click on area B to render it. Then slide to region C, region B is not visible at this time, click C appears, slide back to region B, but at this time, B is missing, finally click again to appear. So the rule is that areas that are no longer visible are not rendered until there is a click interaction. Transform: translateY(0) or transform: translateY(0) Translate3d (0, 0, 0) explains browser parsing and CSS (GPU) animation optimization

13. The scroll bar cannot be used normally after the element is rotated

Problem: If the transform: Rotate (90deg) element overflows and has a scroll bar, the vertical scroll does not change to the horizontal scroll, that is, the horizontal scroll moves the content up and down. Solution: Rewrite element touch method, change element scrollTop reference: none

IPhoneX bottom bar adaptation

Problem: since the iPhoneX doesn’t have a physical home button on the bottom, it doesn’t have a home bar. Instead, it uses an on-screen pull-up button that hides the actual location of the screen, requiring a better solution. Solution 1: Occupy this position, meta tag with viewport:

html, body { height: 100vh; }. Note 1: This solution does not need to be executed sometimes. In wechat, Safari and UC, it is fully paved, but some browsers are not automatically paved. Solution 2: Use the CSS constant() function combined with safe-area-inset-xxx(top/bottom/left/right)

body {
  padding-top: constant(safe-area-inset-top);       /* For the navigation bar + status bar height 88px */
  padding-left: constant(safe-area-inset-left);     /* 0 */ if portrait is not present
  padding-right: constant(safe-area-inset-right);   /* 0 */ if portrait is not present
  padding-bottom: constant(safe-area-inset-bottom); /* The height of the bottom arc is 34px */
}
Copy the code

Special note 2: Some browsers (such as enterprise wechat) will automatically add the security zone, which does not take up the top navigation bar and the bottom drop-down bar. Therefore, after adding this property, the padding value will be added, and the actual content area will be further compressed

15. The iPhoneX doesn’t bounce back when swiped up or down

Error: iPhoneX can’t bounce back by sliding up or down, only safari has address bar and bookmark bar. , can only use min-height: 100%;

Click on an element with tabIndex to trigger a blur event

Error: Set an element with attribute tabIndex =”1″ and focus(). When clicking on the element or inside the element, the blur event will trigger the element. Set the element’s touchStart to prevent event passing dom.addeventListener (‘touchstart’, e => E.toppropogation ()) Reference: None