Flexibility 2.0.1 issues with IE9

Question

Flexibility 2.0.1 issues with IE9

roryhardy opened this issue 8 years ago · 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.

Before Flexibility:

After Flexibility:

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;
}

Michael · Answer 1 · Mon Aug 06 2018 09:03:15 GMT+0800 (China Standard Time)

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?