Not working in IE9 and below

[kirstylmarks]

Hi,

Ive tried to get this working in IE9 and no luck whatsoever.

Ive placed the prefixes in, and no luck. Can someone please explain what im doing wrong.

http://codepen.io/rusticblonde/pen/xgJRdj

Thanks
Kirsty

[luisbajana]

Having the same problems, it's not working...

[mortensassi]

Same here with 2.0.1

[luisbajana]

I solved it using the 1.x version of this plugin, apparently the problem affects only 2.x versions.

[mortensassi]

Do you have to do any more than add -js-display: flex; to the CSS file?

[luisbajana]

Yes you have to initialize it in your HTML (this is only gonna be execute it in IE)
[IF IE]>
<script type="text/javascript">
flexibility(document.body);
</script>
<![endif]

I added prefixes for old webkit based browsers like safari in iPad 2 for example, I used this routine in gulp to do two things, add the prefixes for old webkit based browsers (autoprefixer()), and the postcss-flexibility to make this plugin work in IE.

gulp.task('autoprefixer', function () {
var postcss = require('gulp-postcss');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('autoprefixer');
var path = require('path');

return gulp.src('./*.css')
    .pipe(sourcemaps.init())
    .pipe( postcss([ require('postcss-flexibility') ]) )
    .pipe(postcss([ autoprefixer() ]))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./css'));

});

[mortensassi]

What do you mean by initialize?
In my default.pug file i'm loading it like this:

script(src='/bower_components/flexibility/dist/flexibility.js')

I don't have to execute it in my main.js or something?

[luisbajana]

You're just loading the plugin, you have to call the function passing an object as a parameter, in this case I'm passing document.body.

flexibility(document.body);

You can call it from your main.js, but you'll have some errors in Safari on iPad 2 for example. That's why i suggested call from the bottom of your document validating if it's internet explorer.

[mortensassi]

Ah thank you. When i follow your instruction i get this error in IE9:

SCRIPT5002: Function expected
main.js, line 159 character 1
SCRIPT5007: Unable to get value of the property '-js-display': object is null or undefined
flexibility.js, line 1 character 11784

[Deleted user]

I have the same error. @moesphemie How did you fix this?

[mortensassi]

@katiasmet unfortunately i couldn't get this to work. Instead i used the good old floats in combination with matchHeight in order to get the same height for all my divs.

[yale8848]

lib 2.0.1

<div class="box box0">
<span class="item"></span>
</div>

.box {
    display: flex;
    width: 50px;
    height: 50px;
    background-color: #fff;
    border-radius: 10px;
    margin-left: 50px;
    margin-top: 50px;
    padding: 2px;
}
.box .item {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: #000;
    border-radius: 50%
}
.wrapper .box0 {
    justify-content: center;
}

right display:

but in IE9 display:

<script type='text/javascript' src="./js/flexibility.js">
</script>
<script type='text/javascript'>

window.onload=function(){
flexibility(document.body);
}

</script>

.wrapper .box0 {
    justify-content: center;
    -js-display: flex;
}

then i change lib to 1.0.6 ,and it works well in IE9

[chrispepper1989]

Thanks for this info yale8848, I feel a bit closer than before, but now i'm getting this basic JS error from the flexibility.js:

SCRIPT5009: 'module' is undefined
flexibility.js (1,502)

as its minified it's hard to see what it's complaining about specifically....