Resolve Flexbox Cross-browser Compliant bugs

As early as September 2013, when I tested my solved by Flexbox project, I found a bug in IE10 and IE11 that sticky footer actually didn't paste at the bottom of the page. I spent a lot of time to solve the problem, but I never succeeded.

At first, I was really angry. Before Flexbox, it is not possible to use a pure CSS to achieve sticky footer If you don't know the exact size of the footer. Flexbox changed all this and you can use CSS to solve this problem.

After disappointment, I finally came to the conclusion that this is not a big deal. I mean, from a progressive perspective, my solution is pretty good. Although it is not perfect in IE, but not bad, content is still accessible, it will only be displayed on the smaller content page, and on the longer page, it looks like the chrome, Firefox, opera and Safari browser to get a similar display.

A few weeks ago, I saw a new request in GitHub, using the rules under IE @media to solve the problem of sticky footer. This made me think about it again, and I decided to find a specific solution instead of using any browser-specific hack techniques.

It turns out that there are solutions that are achievable and that I'm not trying hard enough.

In this article, I'll explain the solution and discuss some of the bugs I found in the browser. and the corresponding bug put forward some repair suggestions, so that flexbox can better achieve cross-browser compatibility.

What are the bugs?

The Flexbox specification has not yet been finalized, so there will naturally be some recent drafts and browsers to implement the lag. This article does not intend to point to any organization behind the back, their purpose is to help us to do front-end development of the staff to manage the inconsistency of the browser.

Here's a list of issues I encountered in various browsers when making the sticky footer case:

• In ie10~11 browsers, flex items that have a minimum height ( min-height ) will ignore the height of their parent container ( height );
• There is no concept of minimum content for flex projects in Chrome, opera and Safari browsers;
• Ie10~11 is not allowed in the Flex standard with no unit valueflex-basis

The problem of Min-height

In IE10 and IE11, min-height properties can set the flex size of the container column direction, but the setting will fail if the container's flex items do not know the size of their parent container, that is, the parent container is not set height min-height .

This problem exists in my sticky footer case, because the sticky footer layout requires that the content be set to a min-height 100% (or 100vh ) declaration to ensure that the content area is at least as high as the height of the browser window.

Now flex that the project is not recognized min-height , we need to find another way to make it work.

Flex Project Content Minimum size

When a large flex item is placed flex in a container, the other items are flex smaller (this is the algorithm for the flex layout). is flex-shrink calculated according to the content. But many browsers are just the opposite, and they should not allow flex the project to shrink indefinitely. When they are small to the minimum width or height of the declaration should not continue to shrink, if not declared the minimum width or height, should be reduced to the size of its content, no longer continue to shrink.

The Flexbox specification is described in this way:

By default, flex items are not shrunk below their minimum content size (the length of the longest word or the element of a fixed size). To change this situation, flex set or attribute to the project min-height min-wdith .

Chrome,opera and Safari have now ignored this specification, allowing the flex project to be reduced to zero. As a result, your content will overlap.

Flex-basis with no units

The Flexbox specification for the IE10 version previously released indicates that the Flexbox project is in use flex to set up units.

If the larger size is "0", it must specify a unit (such as 0px ) to avoid ambiguity; "0" without units is either considered to be flexible or as a grammatical error.

This is not a true norm, but ie10~11 still treats it as true. If you use flex a declared one 1 0 0 , then this rule will be considered an error in ie10~11, and the flexibility of the entire rule will be ignored by the browser.

find a solution to replace sticky footer

I chose Sticky footer layout as the main example of this article because I met a lot of people trying to find a cross-browser solution. But before we get into the details of the presentation, let's make sure we're all on the same page.

Here is the structure I used to make the sticky footer layout:

<body class= "Site" >
<main class= "Site-content" >...</main>
<footer class= "Site-footer" >...</footer>
</body>

Browsers that follow the specification use the following code to achieve sticky footer layout effects:

. Site {
Display:flex;
Flex-direction:column;
MIN-HEIGHT:100VH;
}
. site-content {
Flex:1;
}

Now, as we mentioned, this CSS is working, but not all browsers are fully compliant, so in some browsers, he has a problem.

If you're an experienced front-end developer, you should know that any solution to the cross-browser problem is not only to get him working today, but also to make sure that your project is done and that it works.

The solution depends on any behavior of the solution.

So far, based on what has been said above, my personal request is to find an alternative solution to the sticky footer layout that must meet:

Works properly under all browsers
The browser fixes these bad behaviors and continues to work.
Do not rely on browsers for any special hack means

Use height instead of min-height

If you do front-end development for a while, you should remember that min-height (or min-width) attributes are never supported in IE6. However, when solving this problem, always use height:100% to replace min-height:100%. Because browsers have a consistent effect on their parsing. Therefore, when making a sticky footer layout, it is advisable to set a height:100% like the solution in IE6.

Knowing this, I tried the first solution I found, using height:100 VH instead of MIN-HEIGHT:100VH. After testing, he can actually work in IE, but it does not work in Chrome, so I recorded it immediately.

It turns out that we should be careful to understand the norms, and can not blindly recognize the taste of chrome is correct, ie is wrong.

In CSS, you usually use min-height instead of height to avoid the overflow problem when the content exceeds the height. When there is too much content, you explicitly set the height value, which means that the content is cut, overlapped, or the scroll bar appears. In many cases, these are bad forms of expression. However, when you do this on the BODY element (like sticky footer layout), the scroll bar is not a big deal. This is exactly what you want, actually. So when you explicitly define HEIGHT:100 VH on the BODY element and have too much content, the result should be the same.

So the question is: why doesn't it work in the Chrome browser?
The problem of the smallest size

As I mentioned earlier, some browsers mistakenly reduced the flex project to a size smaller than its default content, causing the content to overlap. This is also to change the min-height to the height, but I do not work when I test in chrome.

What happens when the page header, footer, and content elements are reduced to the minimum size (but not less) of the element content? If these elements (combinations) have more content on the screen, the BODY element should be the same as the scroll bar overflow. The headers, footers, and content elements should all be displayed correctly, one below the other, without overlapping.

What happens to Chrome instead of allowing the page header, footer, and content elements to shrink less than the minimum size of the default content. The result is that the BODY element does not overflow and occurs on the page header, footer, and content element itself. Because the overflow defaults for these elements are visible, their content is stacked with each other. The footer is fixed at the bottom of the page, and the page main content is overflowed and stacked together.

Fortunately, there is an easy way to solve this problem.

The Flexbox specification identified a Flex-shrink property with a default value of 1, which indicates that its flex project should shrink less than the minimum size of its content default. You can also use flex-shrink:0; get flex-shrink:1 the same form as. If the size of an element is determined by its child elements, the width, height, or flex-basis value is not set, and then the flex-shrink:0 is set, and the same effect can be achieved to avoid the error mentioned earlier.
Avoid the flex-basis of the unit

A flex-basis bug with no units is the simplest of several bugs, but it can be said to be the hardest to track.

In the original solution sticky footer problem, the content element on the declaration of Flex:1. Since Flex:1 is a shorthand for flex:1 1 0px, and since I know that no scaling is needed, I've decided to use flex:1 0 0px.

This works all the time until I test in IE.

In IE there is a combination of vulnerabilities and CSS compression: In order to reduce the size of the CSS file, often 1 0 0px omit unit value 1 0 0 (no flex-basis value with units). So ie10~11 completely ignored the statement.

Once the root of the problem is discovered, the solution is negligible. Set a clear flex-basis value, or use flex:0% when using flex shorthand. Note that using 0% is stronger than 0px.
Put ' em together.

Here's a summary of the bugs and corresponding solutions discussed in this article:

In the Ie10~11 browser, min-height is not suitable for the Flex container's child element Flex project. If possible, use the height to replace Min-height.
The minimum size of the Flex project content is not recognized in Chrome,opear and Safari browsers. You can set the value of Flex-shrink to 0 (instead of the default 1) to avoid unnecessary contractions.
Do not use flex-basis values without units, because flex shorthand is ignored in ie10~11. Often use 0% to replace 0px.

Remember all the flaws and solutions, this is the alternative solution that I finally came up with. It may not be as refreshing as it was initially, but it satisfies a solution of all our requirements:

It can work in all browsers
Specification compatibility, errors are there, but can continue to work
Do not use any browser-specific hack

I added annotations to the CSS to address those solutions:

/**
* 1. Avoid the IE 10-11 ' min-height ' bug.
* 2. Set ' Flex-shrink ' to ' 0 ' to prevent Chrome, Opera, and Safari from
* Letting items shrink to smaller than their content ' s default
* Minimum size.
*/
. Site {
Display:flex;
Flex-direction:column;
HEIGHT:100VH; /* 1 * *
}
. Site-header,
. Site-footer {
flex-shrink:0; /* 2 * *
}
. site-content {
Flex:1 0 Auto; /* 2 * *
}

You can click on this case to view the solution of sticky footer using Flexbox.
Footnote:

Technically, if you do not need a compatible IE7 and the following versions, creating a sticky footer layout can use display:table when you do not know the page header and footer height. In the implementation of Cross-browser, to use the browser's hack, it can be said is not a practical solution.
"All browsers", I mean all browsers that implement the Flexbox specification for March 2012 or later. In other words, a modern browser that supports Flexbox.
Use flex-basis:0 to solve most problems, but not all of them. This solution won't work if you want the flex project to shrink to no less than the default content size.
The Flexbox specification, updated in March 2014, changed the meaning of flex:1 from 1 0 0px to 1 0 0%. That means Flex:1 's shorthand is equivalent to Flex:1 0 0%.