Polymer 1.1- Firefox＆＃39;布局垂直中心＆＃39;破碎

Question

使用Polymer 1.1，在Chrome中，当屏幕调整为较小时，元素会居中。但在Firefox中，它们向左移动。

我为此提交了一个错误，但与此同时...... 有没有办法让它们在Firefox中居中而不会在Chrome中破坏它们？

<dom-module id="portfolio-display">
  <style>
    :host[show] {
      @apply(--layout-horizontal);
      @apply(--layout-center-justified);
      height: 100%;
      width: 100%;
      background-color: var(--paper-grey-50);
     }
    #main {
      width: 100%;
      margin-top: 50px;
    }
  </style>

  <template>
    <template is="dom-if" if="{{show}}">
      <iron-media-query query="(min-width: 900px)" query-matches="{{queryMatches}}"></iron-media-query>
      <div id="main">
        <div class="layout vertical center center"> 
          <portfolio-first-row class$="{{computeMediaSize(queryMatches)}}"></portfolio-first-row>
          <portfolio-second-row  class$="{{computeMediaSize(queryMatches)}}"></portfolio-second-row>
          <portfolio-third-row  class$="{{computeMediaSize(queryMatches)}}"></portfolio-third-row>
        </div>
      </div>
    </template>
  </template>

  <script>
    Polymer({
      is: "portfolio-display",
      properties: {
        show: {
          type: Boolean,
          reflectToAttribute: true,
          value: false
        }
      },
      toggleShow: function() {
        this.show = !this.show;
      },
      computeMediaSize: function (smallScreen) {
        if (!smallScreen) {
          return "layout vertical center center";
        }
      }
    });
  </script>
</dom-module>