preface

After the last article, I have collected the second wave of common mobile terminal bugs and their solutions from my friends. Some of the solutions may be inaccurate or have problems. I hope you can comment on the correct solutions.

Note: the bug in this article is collected in the network, the solution may not be accurate, welcome to provide a more complete solution.

Recommended reading time: 10 to 15 minutes

Fastclick causes a focus conflict in the drop-down box

Q: With FastClick on mobile, on ios, there are several successive drop-down boxes where the first select box suddenly fills the second drop-down box.

A: The root cause is the Fastclick bug that causes multiple select in IOS. Check whether the device is IOS in the onTouchStart event, then check whether the current nodeName is select, if return false to prevent fastClick from executing other events

Github source code address: fastclick.js

/ / line 391 lines FastClick. Prototype. OnTouchStart =function(event) {// Add an event to its method that does not return when ios select matchesif(deviceIsIOS&&this.targetElement =="select") this.targetElement = null event.preventDefault(); } //line521 or the source code about touchEnd not ios or not select event comment,if(! deviceIsIOS || targetTagName ! = ='select') {
				this.targetElement = null;
			event.preventDefault();
		}


Copy the code

Ios Input does not automatically get focus

Q: As mentioned above, you want the input field to automatically get focus on a page

A: solution: document. AddEventListener (‘ touchstart ‘, function (e) {document. GetElementById (‘ focus’). The focus (); }); You can’t wrap a focus around it. That won’t work

Note: The specific implementation effect needs to be verified. If there is time, possible additional problems and supplementary schemes can be verified

Remove webKit’s default scroll bar

Q: As shown in question A: Solution:

element::-webkit-scrollbar{         display:none     }Copy the code

Video Cannot be automatically played

Q: As shown in question A: Solution: (1) Autoplay and JS control playback, some devices still do not work (2)

$("html").one("touchstart".function(){             video.play();         })Copy the code

When an inline-block element uses vertical-align, the parent element’s height is inexplicable

Q: As mentioned in the question, it does not necessarily appear on the mobile terminal, but the effect is more serious on the mobile terminal. It is generally used to set the peer content vertically centered A: Solution:

.par{       font-size:0     }Copy the code

The background image is not adaptive

Q: The solution is background-size

element{       background-size:100% 100%;     }Copy the code

Element child flashes after cSS3 translate3D translation effect

Q: After applying the translate3D translation effect of CSS3 translate3D tag element, safari on ios and webView of app will show the flashing phenomenon of its child element after page loading, as follows:

< span style= "-webkit-transform: translate3d(0, 0, 0); -webkit-transition: 0ms; "> < li > < img SRC =" http://pic2.58.com/m58/m3/img/imglogo_gray.png" Ref = "http://1.pic.58control.cn/p1/big/n_22998799743506.jpg" > < / li > < / ul >Copy the code

A: Solution: 1. You can add the same attributes to its child elements as follows:

< span style= "-webkit-transform: translate3d(0, 0, 0); -webkit-transition: 0ms; "> < span style=" -webkit-transform: translate3d(0, 0, 0); "> < img SRC =" http://pic2.58.com/m58/m3/img/imglogo_gray.png" Ref = "http://1.pic.58control.cn/p1/big/n_22998799743506.jpg" > < / li > < / ul >Copy the code

2. Add the following attributes to the element: -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; (Sets how embedded elements are rendered in 3D space: Keep 3D)

Position :fixed Fixed effect

Q: When you add position:fixed to the specified element, after loading the page for the first time and sliding the entire page, the element added with this style will scroll with the page (to fix the element). -webkit-transform: translate3d(0,0,0)

Note: This solution may not be effective. Follow-up verification or better solution is required

IOS keyboard letter input, the default initial letter uppercase

Q: As shown in question A: Solution:

<input type="text" autocapitalize="off" />

Copy the code

Select drop – down selection set right alignment

Q: As mentioned, the default is left aligned. The product has other requirements. A: Solution:

select option {
direction: rtl;
}

Copy the code

Skew is deformed by Transform, and the rotate causes a sawtooth phenomenon

Q: As shown in question A: Solution:

-webkit-transform: rotate(-4deg) skew(10deg) translateZ(0); transform: rotate(-4deg) skew(10deg) translateZ(0); Outline: 1 px solid rgba (255255255, 0)Copy the code

Mobile click delay

A: Solution: Refer to fastclick.js

Mobile endpoint penetration problem

Q: As mentioned above, when clicking on the absolute location element, the element below is covered, but also triggered. A: The reason: TouchStart precedes Touchend before Click. Click is triggered by a delay of about 300ms, which means that after the tap is triggered, the mask is hidden, and then the click is not triggered. 300ms later, due to the mask is hidden, our click is triggered on the following link A. Solution:

(1) Use touch events instead of click events whenever possible. For example, use the Touchend event (recommended). (2) Use fastclick, https://github.com/ftlabs/fastclick (3) using the preventDefault stop the click of a tag (4) (300 +) ms delay some time to handle the event (not recommended) (5) above are generally able to solve, If not, use the Click event.Copy the code

In iOS, when you enter English in the Chinese input method, there may be a space of one sixth between letters

Q: As in problem A: Solution: by regular substitution

this.value = this.value.replace(/\u2006/g, ' ');
Copy the code

1px border for Retina display

Q: As shown in question A: Solution:

Element{
  border-width: thin;
}
Copy the code