Flexibility 2.0.1 issues with IE9
roryhardy opened this issue · comments
Good morning,
I've been seeing a few issues with IE9 and the latest version of Flexiblity (1.0.6 works as expected). I noticed that there are other issues that may be related, but do not seem to be the same as what I'm seeing so I figured it'd be easier for you if I logged a new issue.
I'm thinking that this is likely related to #32.
Basically, I have two simple flexbox components next to each other. Upon running flexibility(document.body);
, the layout blows up.
Here is a jsbin with all of the code for easy IE9 testing: http://jsbin.com/lesaxanune/edit?html,css,output
Since I'm not sure how long this jsbin will stay alive, here is the code below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexibility/2.0.1/flexibility.js"></script>
</head>
<body>
<p>The solid red border shows the container element, not the bar component</p>
<div id="horizontal">
<div class="Bar Bar--horizontal">
<div class="Bar-start Bar--medium">Start</div>
<div class="Bar-middle">Middle</div>
<div class="Bar-end Bar--medium">End</div>
</div>
</div>
<div id="vertical">
<div class="Bar Bar--vertical">
<div class="Bar-start Bar--medium">Start</div>
<div class="Bar-middle">Middle</div>
<div class="Bar-end Bar--medium">End</div>
</div>
</div>
</body>
</html>
.Bar {
box-sizing: border-box;
-js-display: flex;
display: flex;
justify-content: space-between;
}
.Bar--horizontal {
align-items: center;
flex-wrap: nowrap;
border: 1px dashed blue;
padding: 0.5rem;
height: 100%;
}
.Bar--vertical {
flex-wrap: nowrap;
flex-direction: column;
border: 1px dashed blue;
padding: 0.5rem;
height: 100%;
}
.Bar-start {
order: 0;
border: 1px dashed #ccc;
}
.Bar-middle {
order: 1;
border: 1px dashed #ccc;
}
.Bar-end {
order: 2;
border: 1px dashed #f00;
}
.Bar--horizontal .Bar-start {
text-align: left;
}
.Bar--horizontal .Bar-middle {
text-align: center;
}
.Bar--horizontal .Bar-end {
text-align: right;
}
.Bar--horizontal .Bar--medium {
min-width: 30%;
}
.Bar--vertical .Bar--medium {
min-height: 30%;
}
#horizontal {
border: 1px solid red;
width: 75%;
height: 100px;
margin-bottom: 10px;
}
#vertical {
border: 1px solid red;
width: 15%;
height: 500px;
margin-bottom: 10px;
}
I've been investigating this, and came up with a very small set of css/html to replicate:
<!DOCTYPE html>
<html>
<head>
<style>
.Bar {
-js-display: flex;
display: flex;
align-items: center;
border: 1px dashed blue;
height: 100%;
}
#horizontal {
border: 1px solid red;
width: 75%;
height: 113px;
margin-bottom: 10px;
}
</style>
<script src="flexibility.js"></script>
</head>
<body>
<p>The solid red border shows the container element, not the bar component</p>
<div id="horizontal">
<div class="Bar">
<div>Start</div>
</div>
</div>
<script>
flexibility(document.body);
</script>
</body>
</html>
generates this output in chrome:
and this in ie9 (standards mode):
I think part of the problem is in the test css .Bar
has a height of 100%
but getComputedStyle()
doesn't handle percents. I added some logic just above this line https://github.com/jonathantneal/flexibility/blob/master/lib/read/getComputedLength.js#L39
// for percent, calculate property based on parent's computed size
if(unit === '%') {
var parentComputedStyle = window.getComputedStyle && getComputedStyle(element) || {};
var d = parentComputedStyle[prop];
if(d !== undefined) {
d = parseInt(d, 10);
var pct = size / 100;
return Math.round(d * pct);
}
}
As a result I now see this in ie9 (standards mode):
So now I think it's just a matter of solving the issue of this thing being aligned wrong on the main axis. @jonathantneal or anyone else, thoughts on this?