Summary of wechat H5 compatibility problems

1.CSS3 is incompatible with earlier versions of mobile phones such as Android 4.3,IOS8 and below

Problem description: When the above mobile phone processes the animation, the animation is not loaded. If the interface setting appears after the animation is loaded, it will set overflow:hidden style to the page to make the page load a blank interface.

Solution: The above mobile version of CSS3 animation frame processing should be extra careful:

@-webkit-keyframes Each animation frame needs to be prefixed with -webkit-.

IOS8 processing animation when the load can not start animation, need to delay animation, so that the browser has enough time to load animation.

Here’s a solution to a similar problem with Stack Overflow.

2. Flex is incompatible with older phones (android 4.3,IOS8 and below)

Problem description: The Flex layout in the previous version of the phone does not work, the overall layout still belongs to the default.

Solution: reference segmentfault.com/a/119000000…

The flex container is assumed to be.box and the child element is.item.

Compatible writing (the way to handle this problem) begins by defining the display property of the container:

.box{  display: -webkit-box; /* Older syntax: Safari, iOS, Android browser, older WebKit browsers. */  display: -moz-box; /* Old version syntax: Firefox (buggy) */  display: -ms-flexbox; /* Mixed version syntax: IE 10 */  display: -webkit-flex; /* New version syntax: Chrome 21+ */  display: flex; /* New version syntax: Opera 12.1, Firefox 22+ */ }
Copy the code

Since the old syntax is not included in the W3C standard, display:box is not used here, and the following syntax is the same.

Note also that if the child element is inline, in many cases display:block or display:inline-block is used to turn the inline child element into a block element (such as using the box-flex attribute), which is one of the differences between the old and new syntax.

Spindle alignment of child elements

.box{  -webkit-box-pack: center;  -moz-justify-content: center;  -webkit-justify-content: center;  justify-content: center; }
Copy the code

The old syntax has 4 arguments, while the new syntax has 5 arguments. The space-around syntax compatible with the new syntax is not available:

.box{
 box-pack: start | end | center | justify;
 / * main shaft alignment: left aligned (default) | | center aligned right about | aligned * /
 
 justify-content: flex-start | flex-end | center | space-between | space-around;
 / * main shaft alignment: left aligned (default) | | center aligned right aligned on both ends of the | | * / average distribution
}
Copy the code

Cross axis alignment of child elements

.box{  -webkit-box-align: center;  -moz-align-items: center;  -webkit-align-items: center;  align-items: center; }
Copy the code

The parameters here have the same function in addition to different writing methods:

.box{  box-align: start | end | center | baseline | stretch;  / * cross shaft alignment: top alignment (default) | | center aligned at the bottom of the baseline alignment | | text alignment, up and down and covered with * /    align-items: flex-start | flex-end | center | baseline | stretch;  / * cross shaft alignment: at the bottom of the top alignment (default) | | center aligned | up and down and covered with | text baseline aligned * / }
Copy the code

A child element can be displayed in box-direction + box-orient + flex-direction.

Left to right

.box{  -webkit-box-direction: normal;  -webkit-box-orient: horizontal;  -moz-flex-direction: row;  -webkit-flex-direction: row;  flex-direction: row; }
Copy the code

Right to left

.box{  -webkit-box-pack: end;  -webkit-box-direction: reverse;  -webkit-box-orient: horizontal;  -moz-flex-direction: row-reverse;  -webkit-flex-direction: row-reverse;  flex-direction: row-reverse; }
Copy the code

The box-direction method only changes the order of the child elements, but does not change the alignment. You need to add a box-pack to change the alignment.

Top to bottom

.box{  -webkit-box-direction: normal;  -webkit-box-orient: vertical;  -moz-flex-direction: column;  -webkit-flex-direction: column;  flex-direction: column; }
Copy the code

Bottom to top

.box{  -webkit-box-pack: end;  -webkit-box-direction: reverse;  -webkit-box-orient: vertical;  -moz-flex-direction: column-reverse;  -webkit-flex-direction: column-reverse;  flex-direction: column-reverse; }
Copy the code

Whether child elements are allowed to scale

.item{  -webkit-box-flex: 1.0;  -moz-flex-grow: 1;  -webkit-flex-grow: 1;  flex-grow: 1; }
 
.item{  -webkit-box-flex: 1.0;  -moz-flex-shrink: 1;  -webkit-flex-shrink: 1;  flex-shrink: 1; }
Copy the code

If box-flex is not 0, the child element is allowed to scale. If flex is not 0, the child element is allowed to scale. If flex is 0, the child element is allowed to scale. Box-flex defaults to 0, which means that by default, it behaves differently in both browsers:

In the old syntax, if the value of box-flex is not equal to 0, the larger the value of box-flex is, the larger the proportion of blank space is, and vice versa:

In the new version of the syntax, the scaling is assigned directly to the value of flex-grow. The flex-grow scaling overwrites flex-shrink:0.

Parameters:

.item{  box-flex: <value>;  /* Scaling: < a floating point number. The default value is 0.0, which means that it is not scalable. Values greater than 0 are scalable, and flexible relative >*/    flex-grow: <number>; /* default 0 */  /* Zoom in: defaults to 0 (if there is no space left, zoom in if the value is 1, 2 is double the size of 1, and so on) */    flex-shrink: <number>; /* default 1 */  /* Shrink: defaults to 1 (shrinks if space is insufficient, and does not shrink if the value is 0) */ }
Copy the code

Display order of child elements

.item{  -webkit-box-ordinal-group: 1;  -moz-order: 1;  -webkit-order: 1;  order: 1; }
Copy the code

The old syntax section defines the display property of the container

.box{  display: -moz-box; /*Firefox*/  display: -webkit-box; /*Safari,Opera,Chrome*/  display: box; }
Copy the code

Container attribute

1. The box – pack attributes

Box-pack defines the spindle alignment of child elements.

.box{  -moz-box-pack: center; /*Firefox*/  -webkit-box-pack: center; /*Safari,Opera,Chrome*/  box-pack: center; }
Copy the code

The box-pack property has a total of four values:

.box{  box-pack: start | end | center | justify;  / * main shaft alignment: left aligned (default) | | center aligned right about | aligned * / } 
Copy the code
2. The box – the align attribute

Box-align defines the cross axis alignment of child elements.

.box{  -moz-box-align: center; /*Firefox*/  -webkit-box-align: center; /*Safari,Opera,Chrome*/  box-align: center; }
Copy the code

The box-align property has a total of five values:

.box{  box-align: start | end | center | baseline | stretch;  / * cross shaft alignment: top alignment (default) | | center aligned at the bottom of the baseline alignment | | text alignment, up and down and covered with * / }
Copy the code
3. The box – direction attribute

Box-direction Defines the display direction of child elements.

.box{  -moz-box-direction: reverse; /*Firefox*/  -webkit-box-direction: reverse; /*Safari,Opera,Chrome*/  box-direction: reverse; }
Copy the code

The box-direction attribute has three values:

.box{  box-direction: normal | reverse | inherit;  / * display direction: the default direction | | inherit the child elements in the opposite direction of the box - direction * / }
Copy the code
4. Box – received properties

Box-orient defines whether child elements should be arranged horizontally or vertically.

.box{  -moz-box-orient: horizontal; /*Firefox*/  -webkit-box-orient: horizontal; /*Safari,Opera,Chrome*/  box-orient: horizontal; }
Copy the code

The box-orient attribute has a total of five values:

.box{  box-orient: horizontal | vertical | inline-axis | block-axis | inherit;  / * orientation: horizontal vertical | | inline arrangement (the default) | block arranged | inherit the parent box - received * / }
Copy the code
5. The box – lines of attributes

Box-lines defines whether to allow child element newlines when the child element exceeds the container.

.box{  -moz-box-lines: multiple; /*Firefox*/  -webkit-box-lines: multiple; /*Safari,Opera,Chrome*/  box-lines: multiple; }
Copy the code

The box-lines property has a total of two values:

.box{  box-lines: single | multiple;  / * allows a newline: do not allow (the default) | allow * / }
Copy the code

Child element attribute

1. The box – flex properties

Box-flex defines whether the current child element is allowed to scale.

.item{  -moz-box-flex: 1.0; /*Firefox*/  -webkit-box-flex: 1.0; /*Safari,Opera,Chrome*/  box-flex: 1.0; }
Copy the code

The box-Flex attribute uses a floating-point value:

.item{  box-flex: <value>;  /* Scaling: < a floating point number. The default value is 0.0, which means that it is not scalable. Values greater than 0 are scalable, and flexible relative >*/ }
Copy the code
2. The box – ordinal – group properties

Box-ordinal-group defines the display order of the child elements, the smaller the number, the higher the order.

.item{  -moz-box-ordinal-group: 1; /*Firefox*/  -webkit-box-ordinal-group: 1; /*Safari,Opera,Chrome*/  box-ordinal-group: 1; }
Copy the code

The box-direction attribute uses an integer value:

.item{  box-ordinal-group: <integer>;  /* Display order: < an integer. The default value is 1 }
Copy the code

The new syntax defines the display property of the container

.box{  display: -webkit-flex; /*webkit*/  display: flex; }
 
/ * inline flex * /
.box{  display: -webkit-inline-flex; /*webkit*/  display:inline-flex; }
Copy the code

The container style

.box{  flex-direction: row | row-reverse | column | column-reverse;  / * principal axis direction: left to right (the default) | | | right to left to the top to the bottom of the bottom up * /    flex-wrap: nowrap | wrap | wrap-reverse;  / * line: no newline (default) | | a new line and the first line of a new line below * /    flex-flow: <flex-direction> || <flex-wrap>;  /* Main axis and newline shorthand */    justify-content: flex-start | flex-end | center | space-between | space-around;  / * main shaft alignment: left aligned (default) | | center aligned right aligned on both ends of the | | * / average distribution    align-items: flex-start | flex-end | center | baseline | stretch;  / * cross shaft alignment: at the bottom of the top alignment (default) | | center aligned | up and down and covered with | text baseline aligned * /    align-content: flex-start | flex-end | center | space-between | space-around | stretch;  / * main shaft alignment, the top centered alignment aligned (default) at the bottom of the | | | fluctuation aligned and covered | fluctuation average distribution * / }
Copy the code

Child element attribute

.item{  order: <integer>;  /* Sort: The smaller the value, the higher the rank. Default is 0*/    flex-grow: <number>; /* default 0 */  /* Zoom in: defaults to 0 (if there is no space left, zoom in if the value is 1, 2 is double the size of 1, and so on) */    flex-shrink: <number>; /* default 1 */  /* Shrink: defaults to 1 (shrinks if space is insufficient, and does not shrink if the value is 0) */    flex-basis: <length> | auto; /* default auto */  /* Fixed size: default is 0, you can set the px value, you can set the percentage size */    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>] /* Short for flex-grow, flex-shrink, and flex-basis. The default value is0 1Auto, * / align - self: auto | flex - start | flex - end | center | baseline | stretch;/ * alone alignment: auto (default) | top alignment aligned at the bottom of the | | center alignment | up and down and covered with | text baseline aligned * / }
Copy the code