H5 pitfall notes-Continuous updates, h5 pitfall --

H5 pitfall notes-Continuous updates, h5 pitfall --

I have been working on mobile pages recently and found many pitfalls. Here I will summarize them and fill them in ......

Common css problems (I) I. Automatic uppercase of the first letter of the iOS keyboard

In IOS, the first letter of an English input method is automatically capitalized, which is sometimes annoying.

In iOS, the upper-case letter function is enabled on the keyboard by default. If the business does not want to use upper-case letters, you can do this:

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

Ii. Default Inner Shadow and style issues in the iOS input box

On iOS, the input box has an internal shadow by default, but it cannot be cleared using box-shadow. If you do not need a shadow, you can disable it like this. However, after adding the above attribute, by default, there are still rounded corners in iOS, but you can use the border-radius attribute to modify them:

input,textarea {    border: 0;     -webkit-appearance: none; }

Iii. style issues in the andriod input box type = "number"

Remove the default style of input [type = number]

input[type=number] {    -moz-appearance:textfield;}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {    -webkit-appearance: none;    margin: 0;}

4. The cursor in the input box is not centered

Generally, if we do not set the line-height value on the Mobile End, the cursor of most machine input boxes can be centered, but if we use the line-height: $ height value, the cursor is not centered.

In this case, we can only use line-height: $ height \ 9 to solve the center problem. line-height: $ height cannot be used here. Example code:

height:40px;line-height:40px\9;font-size:16px;

5. text-indent before the input box

Text-indent in css, but in some andriod machines, the cursor is the input box first, the cursor is still on the leftmost, and then the text is entered to the indent value, which is very bad, we recommend that you use padding-left to set indentation.

6. Question about activating the highlighted box for tag a by default

When you create a mobile page, you will find that all a tags are highlighted when a click is triggered or all elements with a pseudo class: active are set, if you do not want this highlight, you can disable it by using css:

.xxx {    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}

This setting is effective on most machines. However, when Samsung comes with a browser and clicks any a tag on the page, setting-webkit-tap-highlight-color: rgba (,) still has a shadow background color, this should be enforced by the browser and cannot be overwritten through code settings.

One compromise is to replace tag a of the non-real jump link on the page with other tags, which can solve this problem.

7. the browser in Android 2.3 does not support % in border-radius.

When using border-radius to write rounded corners, we recommend that you do not use border-radius: 50% to implement circles. We recommend that you use specific values.

8. border 1 pixel Problem

When the general viewport is set on the mobile terminal. The frame of the 1px unit in the Code is actually 2 pixels on the HD screen (@ 2x) pixel-ratio: 2, and the normal 1px is displayed on the pc (non-HD screen.

border:1px solid #000

We may have some questions here. Why don't we use border-width: 0.5px, but it is not supported by early browsers. It is only supported by ios8.0.

There are usually two solutions: 1. Implemented through border-image (but the disadvantage is that it cannot implement a four-side border and it is a waste of resources to load) 2. scaled through scale

1. border-image implementation demonstration (SCAN address ):

　　

2. scale by scale

① One-side, one-pixel border processing method draws a border through a pseudo class, scales it through scale, and finally processes @ 1.5x (Android machine) @ 2.0x (ios machine) @ 3.0x (Note: 1080 p) scaling ratio

% Border-btm-1pt {content: ''; height: 0px; display: block; border-bottom: 1px solid # ddd; position: absolute; left: 0; right: 0; bottom: 0 ;}. some_div {position: relative; // because the pseudo class uses absolute, you need to add relative &: after {@ extend % border-btm-1pt border-color: # f09; // customize the border color here. } // Adapted to the early Android server 1/1. 5 = 0.666 @ media only screen and (-webkit-min-device-pixel-ratio: 1.5 ){. some_div {-webkit-transform: scaleY (0.666) }}// HD screen (@ 2x) iphone 1/2 = 0.5 @ media only screen and (-webkit-min-device-pixel-ratio: 2 ){. some_div {-webkit-transform: scaleY (0.5)} // 1080 host @ 3x @ media only screen and (-webkit-min-device-pixel-ratio: 3 ){. some_div {-webkit-transform: scaleY (0.333 )}}

② Solve the problem of 1px border on four sides. two ideas: 1. the sub-border uses a pseudo class on both sides, and the parent border uses a pseudo class on both sides. a pseudo-class that draws a four-sided border and then uses width: 200%; height: 200% (Here we mainly talk about @ 2.0x machine, because the @ 1.5 @ 3 ratio cannot be fully calculated, it will be inaccurate and will not be discussed); that is, the content is scaled twice, scaled and processed.

The second case is used as an example here (but note that if a link exists in the container, the set pseudo class will overwrite the element and cannot be clicked, therefore, you must set absolute positioning for the content in the container ):

　　

    <style type="text/css">        h3{text-align:center}        div.border_scale{            margin:100px auto;            width:600px;            height:150px;            position:relative;        }        div.border_scale:before{            display:block;            position:absolute;            content:"\20";            width:200%;            height:200%;            border:1px solid #000;            -webkit-transform-origin:0 0;            transform-origin:0 0;            -webkit-transform:scale(0.5);            transform:scale(0.5);            top:-1px;            left:-1px;        }        div.border_scale a{            display:block;            width:100%;            height:100%;            text-align:center;        }    </style>

<H3> border's 1 pixel frame scale 9. perform skew deformation by using transform. rotate rotation may result in sawtooth.
When we make H5 pages, we will inevitably rotate and deform some elements, but this is a lot of trouble. It would be better to take a picture directly if I saw a card.
We can solve the problem directly in this way: I found that after updating to 6.2.4, some problems will be solved for the rotation of the Sawtooth.
    -webkit-transform: rotate(-4deg) skew(10deg) translateZ(0);    transform: rotate(-4deg) skew(10deg) translateZ(0);    outline: 1px solid rgba(255,255,255,0)
10. Scroll scroll bar of content on h5 page
When we do h5 pages, we often encounter the problem of rolling in the container content. However, when we use those scroll bars, we find that it is too ugly in andriod, there are still problems, and the product MM cannot accept them, so here we provide you with a solution:
. Scroll:-webkit-scrollbar {width: 5px; height: 5px ;}. scroll:-webkit-scrollbar-button {width: 0; height: 0 ;}. scroll:-webkit-scrollbar-corner {display: block ;}. scroll:-webkit-scrollbar-thumb {background-clip: padding-box; background-color: rgba (0, 0 ,. 2); border-radius: 8px;} // You can also set the color of the scroll bar. scroll:-webkit-scrollbar-thumb: hover {background-clip: padding-box; background-color: rgba (0, 0 ,. 5); border-radius: 8px ;}
Let's make the scroll bar look like this, so Mom no longer has to worry about the scroll bar problem ,:
11. CSS3 timing-function: steps () understand the question of moving functions
The first parameter number of steps () is the specified interval, that is, the animation is displayed in n steps. The second parameter is end by default, and the status of the last step is set, start is the end state, and end is the start state.
Steps has two parameters. The first parameter must be completed in several steps. The second parameter has two values. The first frame is the animation end of the first step. // the first frame after the end of the first stage is the first step. animation start // the value at the beginning of the First Stage
Understand that the first frame of start is the first step. The first frame after the animation ends is the first step. The number indicates the number of stages.
Demo: http://pingfan1990.sinaapp.com/honor7/anim.html
Let's look at the last tab. The following can be reversed:

steps()The first parameter splits the animation into three segments. When the specified hop isstartThe animation takes a step at the starting point of each timing cycle (that is, hollow circle> Solid circle in the figure ). Because the first step occurs at the starting point of the first timer cycle (0 s), the first animation (initial state) we see is in the 1/3 state, therefore, the visual animation process is 1/3 → 2/3 → 1.
 

When the hop point is specified as end, the animation takes a step at the end of each timer cycle (that is, hollow circle> Solid circle ). Because the first step occurs at the end of the first cycle (1 s), we can see that the initial state is 0%, and at the completion of the entire animation cycle (3 s ), although a step jumps to the 100% state, the animation ends at the same time, so the 100% state is invisible. Therefore, the visual animation process is 0 → 1/3 → 2/3 (recall that the asynchronous resetting in the digital power is triggered when all the output ends are high, so the full high level is transient ).
 

But when we see such an image, if we know that there are 12 frames, I will understand it as steps (12). In fact, this is completed in 11 stages, it should be steps (11 );
Demo: http://pingfan1990.sinaapp.com/honor7/anim1.html
The steps (11) frame is equivalent to the total length of 1680. The default value is steps (11, end ):
@-Webkit-keyframes run1 {0% {background-position: 0 0;} 9.09% {background-position:-140px 0;} 18.18% {background-position:-280px 0 ;} 27.27% {background-position:-420px 0;} 36.36% {background-position:-560px 0;} 45.45% {background-position:-700px 0;} 54.54% {background-position: -840px 0;} 58.33% {background-position:-980px 0;} 63.63% {background-position:-1120px 0;} 72.72% {background-position:-1260px 0 ;} 81.81% {background-position:-1400px 0;}/* 10 images missing in the middle, 11 stages */100% {background-position:-1540px 0; // 12 frames }}
The steps (12) frame is equivalent to the total length of 1680. The default value is steps (12, end ):
// Here, background-position-x is evenly divided by frame. I will not calculate @ keyframes run {0% {background-position: 0 0;} 8.33% {background-position:-140px 0 ;} 16.67% {background-position:-280px 0;} 25% {background-position:-420px 0;} 33.33% {background-position:-560px 0;} 41.67% {background-position: -700px 0;} 50% {background-position:-840px 0;} 58.33% {background-position:-980px 0;} 66.67% {background-position:-1120px 0 ;} 75% {background-position:-1260px 0;} 83.33% {background-position:-1400px 0;} 91.67% {background-position:-1540px 0;} 100% {background-position: -1540px 0 ;}}
Do not perform animations on the following pseudo classes: before AND: after. This is not supported on mobile terminals. We can use the webkitAnimationEnd event to listen to the animation and make the animation more dazzling.
 
12. problems that may occur when animation is not abbreviated
Today, we encountered a problem caused by not abbreviated animation Version. In order to let the animation achieve step iteration, we usually use animation-delay to set the delay time, But I found that when writing separately, this will cause distortion of animation elements on the Red Rice mobile phone.
 
12. distortion caused by scale-up in transform
A problem encountered yesterday was that a small white circle was scaled up by scale, resulting in different degrees of distortion on the mobile end. The ios edge was very stabbed, and andriod was shown as a translucent edge.
In the end, we found that the scale through the transform is actually to enlarge the bitmap (regardless of the image or image), which will lead to distortion. The solution is to use a large image to zoom in.
13. Problems Caused by translate3d
1. translate3d will invalidate the z-index level of the sibling element, because t3d actually has a z-axis layer transformation. The solution is to add t3d to the sibling element.
2. The fixed element in translate3d is ineffective. It can only be controlled by js or extracted from the sibling element of t3d from the css perspective.
　　
Common js problems (ii) I. latency of Ms clicks on mobile terminals
Click300ms latency is because the iphone uses double-click to enlarge the page by default, and click is used to determine the second click interval of MS as click, which is caused by the use of many manufacturers, the click event has a latency of 300 ms because it is waiting for double-click confirmation, and the experience is not very good.
Most developers use encapsulated tap events instead of click events. The so-called tap events are composed of touchstart events, touchmove judgments, and touchend event encapsulation.
FastClick. js and tap. js can effectively solve the MS latency problem.
References: Ms latency
Ii. Mobile endpoint passthrough
Simply put, because we often use the touchstart event on the Mobile End to replace the click event, there will be a scenario:
<div id="mengceng"></div> <a href="www.jd.com">www.jd.com</a>
Div is an absolutely positioned layer z-index higher than a, and tag a is a link in the page. We bind a tap event to div:
$('#mengceng').on('tap',function(){$('#mengceng').hide();});
When we click on the masked layer, the div disappears normally, but when we click on the masked layer on the tag, we find that the link is triggered. This is called a point-through event.
Cause analysis:
Touchstart is earlier than touchend and earlier than click. That is to say, the trigger of the click is delayed. This time is about Ms. That is to say, after the tap is triggered, the click layer is hidden. After ms, the click layer is hidden, our click triggers the link below.
Solution:
1. Replace the click event with the touch event whenever possible.
2. Block the preventDefault of the click of the link.
Point transparent data: http://segmentfault.com/q/1010000000691822
3. Mobile touch event issues, in andriod4.0
Mobile touch event:
Touchstart // triggered when the finger contacts the screen
Touchmove // triggered when the finger that has touched the screen starts to move
Touchend // triggered when the finger leaves the screen
Touchcancel // triggered when a touch event ends abnormally
The trigger sequence of these four events is:
Touchstart-> touchmove-> touchend-> touchcancel
For some android system touch bugs:
For example, when a finger is dragging the page from top to bottom, a touchstart, touchmove, and the final touchend are triggered theoretically. However, on android 4.0, touchmove is triggered only once, the trigger time is similar to that of touchstart, but touchend is not directly triggered. This is a very serious bug. Many people have mentioned this bug in google Issue. It is very painful to simulate pull-down refresh. Especially when the number of dom nodes in touchmove changes to a large number, at that time, the solution was to use settimeout to dilute touchmove.
You can also block the default preventDefault action in touchmove, which will cause Page scrolling through js:
// The webkit browser touchmove event above android4.0 is only triggered once, and the event is added. preventDefault () can be used, but this leads to the use of js to implement Page scrolling addEventListener ("touchmove", function (e) {e. stopDefault (e) ;}, false)
Iv. html5 gravity sensing event
This is not a problem. I just think it is good. So, when I return to the porter, I simply shake the case.
If (window. deviceMotionEvent) {window. addEventListener ('devicdemo', deviceMotionHandler, false);} var speed = 30; // speed var x = y = z = lastX = lastY = lati = 0; function deviceMotionHandler (eventData) {var acceleration = event. accelerationIncludingGravity; x = acceleration. x; y = acceleration. y; z = acceleration. z; if (Math. abs (x-lastX)> speed | Math. abs (y-lastY)> speed | Math. abs (z-lastZ)> speed) {// code for triggering a simple Shake alert (1) ;}lastx = x; lastY = y; lastZ = z ;}
DeviceMotionEvent is a new event in HTML5. For details about how to detect the gravity sensing Effect of mobile phones, refer:
Http://w3c.github.io/deviceorientation/spec-source-orientation.html
Classic material:
Meta tag Daquan http://segmentfault.com/blog/ciaocc/1190000002407912
Use border-image to implement 1px bottom edge like iOS7: https://github.com/AlloyTeam/Mars/blob/master/solutions/border-1px.md
DevicePixelRatio: http://imququ.com/post/devicepixelratio-and-border-width.html
Mobile problem summary: http://www.alloyteam.com/2015/06/yi-dong-web-wen-ti-xiao-jie/