Check out my simple animation HERE:
My query is about the flexbox centering code applied to the body element:
HTML:
<body class="loading-doc">
<div class="loader">Loading...</div>
</body>
CSS:
.loading-doc {
position: fixed;
height: 100vh;
width: 100vw;
background: #fff !important;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center;
overflow: hidden;
}
The code above successfully centers the only child element of the body in most browsers, except IE. Can anyone explain why this issue arises specifically with Internet Explorer?
I have tested in IE 9, 10, and 11 (which appears as Edge in browser tools despite being on Windows 8.1), and found that flexbox does not work. I expected at least IE 11 to support it, but even that doesn't work. Why is this the case?
caniuse.com includes IE 11 in its list of partially supporting flexbox. The properties I've used are basic flexbox properties, so why aren't they functioning in IE 11 (which strangely appears as Edge in my IE console)? Can someone provide an explanation?
EDIT::
Here's a screenshot of what I'm observing below.
https://i.sstatic.net/YPqrm.jpg
Focus your attention towards the center right.