Injecting browser prefixes for grid not working with Vue

Question

I've blown an afternoon on this already and I'm stumped. I clock that IE11 doesn't support grid-template and that I need to use -ms-grid-columns and -ms-grid-rows instead but I'm trying to generate some CSS and inject it via a Vue method. This works in every browser except IE11:

gridTemplate: function(){
    var gridTemplate = "display: grid;";
    gridTemplate += "grid-template: repeat(4, 1fr ) / repeat(4, 1fr);";
    gridTemplate += "grid-gap: 3px;";
    return gridTemplate;
}

So, to try and get it working in IE11 I instead use this behind a conditional to check if it is that browser:

gridTemplate: function(){
    var gridTemplate = "display: -ms-grid;";
    gridTemplate += " -ms-grid-columns: " + _.fill(Array(4),"1fr").join(" ") + ";";
    gridTemplate += " -ms-grid-rows: " + _.fill(Array(4),"1fr").join(" ") + ";";
    gridTemplate += "grid-gap: 3px;";
    return gridTemplate;
}

As you can tell no doubt tell, I'm using lodash and when I console log the result before returning the CSS I get this: display: -ms-grid; -ms-grid-columns: 1fr 1fr 1fr 1fr; -ms-grid-rows: 1fr 1fr 1fr 1fr;grid-gap: 3px;, but when I inspect the element in IE11 all I get through is: <div style="display: -ms-grid;"> and the -ms-grid-columns and -ms-grid-rows are ignored. I've tried and used the lodash _.fill in other browsers and it works a treat, so I'm pretty sure it's not that. I need the number of rows and columns to be dynamic you see, which is why I'm not just writing it in auto-prefixed SCSS.

I'm sort of wondering if this is down to something with Vue and if so does anyone have any ideas about how to rectify it... hey, if it isn't a Vue thing can someone point me in the right direction?

Answer 1

It looks like you shouldn't actually include the vendor prefixes and that Vue will add them automatically. See documentation: Auto-prefixing.

Consider this screen shot of the IE11 browser tools running the code below:

const foo = {
  methods: {
    gridTemplate: function() {
      return {
        "display": "-ms-grid",
        "grid-columns": _.fill(Array(4), "1fr").join(" "),
        "grid-rows": _.fill(Array(4), "1fr").join(" "),
        "grid-gap": "3px"
      }
    }
  }
}

const app = new Vue({
  el: "#app",
  components: {
    foo: foo
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>


<div id="app">
  <foo inline-template>
    <div :style="gridTemplate()"></div>
  </foo>
</div>