Reprint: HTML5 and Mobile bug

1. Fixed positioning will fail

Problem Description: After the parent element uses the-webkit-transform attribute, the fixed positioning of all child elements will be resolved: Put all the fixed positioning elements to the outermost level of unified management or-webkit-transform:auto;

2. Hierarchical Z-index Issues

(*-webkit-transform-style:preserve-3d; must be added to the immediate parent of the 3D conversion element, otherwise there will be a hierarchy problem *) Mobile end-webkit-transform:translatez (100px) Level is higher than z-index, if you think of the positioning element (a) floating above the 3D element (b), you can add-webkit-transform:translatez (100px) to the A element. But all the parents of a element do not have-webkit-transform-style:preserve-3d otherwise a element will be misplaced;

3.display:none causes transition failure

Replace Display:block/none with Visibility:visible/hidden or use-webkit-animation instead of transition 4.input:disabled the Apple adds transparency. InpS Ty input:disabled {Color:rgba (255,255,255,0.9); opacity:1;} Apple phones are added with transparency by default

5.input Click Bug when keyboard appears

Description: Android Click on input Keyboard, 100% layout of the page height will change, resulting in page layout confusion resolution 1. . wrapper plus minimum height min-height:415;  (Note that sometimes the minimum height is invalidated, with absolute positioning of the outermost position of input) 2. If there's still a problem, just add the minimum height to the outer layer of input

6. Border-radius Overflow:hidden child elements cannot be hidden
parent element plus-webkit-transform-style:preserve-3d; or-webkit-transform:rotate (0deg), can solve the problem of the Apple phone, but the Android device element is still not hidden

7 long by two-dimensional code can not be recognized (save the picture similarly)

     solutions:. qrcode{padding-top:200px!important;margin-top: -200px!important;position:relative; Z-index:100;-webkit-user-select:none;} Add QRCode style     problem description to QR code picture:    1. Recognizable area slightly higher than normal (title bar + System Status bar height (64px)), if the site uses  viewport (640)   Zoom, then the height of the recognizable area is almost 200    2. Long press QR code can lead to cell phone memory leakage, mobile phone card, CSS3 animation out of the way (solution: Exit process, after 2 minutes to enter)  8  Animation animation invalidation      problem cause:        1. The element that is animated must be a block-level element, the inline element needs to change block-level elements, or add absolute positioning, Pseudo-class (: Before  :after) cannot add animations         2. Properties for each stage of the animation (-webkit-transform) to be consistent       The following is the correct         @-webkit-keyframes push{           0%{-webkit-transform:scale (0)  translate (0,0); opacity:0;}           20%{-webkit-transform:scale (1)  translate (0,0) ; opacity:1;}           100%{-webkit-transform:scale (0) &NBSp;translate (0,-100px); opacity:0;}         }      The following error         @- Webkit-keyframes push{          0%{-webkit-transform: Scale (0)  translate (0,0); opacity:0;}           20%{-webkit-transform:scale (1)  translate (0,0) ; opacity:1;}           100%{-webkit-transform:translate (0,-100px); opacity : 0;}  /* missing Scale (0) */        } 9 browser music playback failure     Problem description:     if the page has background music and special effects music, the background music is ready to play before (canplay  not triggered) while loading the effect concert causes the background music to not play properly      ( Background music and special effects music loading will cause background music not to play)      Solutions:     wait for background music  canplay  or   canplaythrough  after loading effects music   

9 Animation animation in Androcaton

Problem Reason: JS Add class to add animation animations on Android will lag and delay resolution 1. Add a animation animation to the element in CSS, hide the element, and then use the JS control element to display the 2.js add class to the element Adding transition animations

Animation-fill-mode:both on Android will cause the page default scroll bar to blink

Cause of the problem

. pagebox{-webkit-animation:fadein 0.5s ease 0s both;z-index:2;} under Android. The default scrollbar for the Pagebox subset element causes. Pagebox Blinking

(Animation-fill-mode:both and Z-index exist at the same time to have this problem) solution. Pagebox{-webkit-animation:fadein 0.5s ease 0s;z-index:2;} Remove both

Reprint: HTML5 and Mobile bug