Flexbox-layout developed with IE but destroyed in Firefox. What's wrong here?

Question

I've made this application on my workplace using a Windows-computer with Internet-Explorer.

For the layout I used flexbox. Everything looked fine.

Then opened it up on a Mac with Firefox and the complete layout was destroyed.

Tried it on the same computer with Safari and there it was fine again. Everything as expected.

Is that a known Firefox-issue? Have I done anything wrong or respectively have I forgotten something?

var sc = {};

sc.btns = document.querySelectorAll('.btn');
sc.from = document.querySelectorAll('.from');
sc.to = document.querySelectorAll('.to');
sc.nums = document.querySelectorAll('.num');
sc.delete = document.querySelector('.del'); 
sc.display = document.querySelector('.display');

sc.currentSystem = 'dec';
sc.targetSystemInt;
sc.targetSystemString;

sc.btns = Array.prototype.slice.call(sc.btns);
sc.from = Array.prototype.slice.call(sc.from);
sc.to = Array.prototype.slice.call(sc.to);
sc.nums = Array.prototype.slice.call(sc.nums);

sc.changeClasses = function (element, toRemove, toAdd) {
  element.classList.remove(toRemove);
  element.classList.add(toAdd);
}

sc.setSystem = function(setSystem) {

  sc.nums.forEach(function(num) {
    if (num.classList.contains(setSystem)) {
      sc.changeClasses(num, 'not-selectable', 'selectable');
    } else {
      sc.changeClasses(num, 'selectable', 'not-selectable');
    }
  });

  sc.setState = function(setOfElements, addOrRemove, cssClass) {
    setOfElements.forEach(function(element) {

      if (addOrRemove === 'add') {
        element.classList.add(cssClass);
      }

      if (addOrRemove === 'remove') {
        element.classList.remove(cssClass);
      }
    });
  }    

  sc.from.forEach(function(btn) {

    if (btn.classList.contains(setSystem)) {
      btn.classList.add('selected');
    } else {
      btn.classList.remove('selected');
    }
  });

  sc.to.forEach(function(btn) {
    var btnSystem = btn.getAttribute('data-system-string');

    if (btnSystem === sc.currentSystem) {
      btn.classList.add('not-selectable');
    } else {
      btn.classList.remove('not-selectable');
    }

  });
}

sc.from.forEach(function(element) {

  element.addEventListener('click', function(e) {
    sc.currentSystem =
      e.currentTarget.getAttribute('data-system-string');
    sc.setSystem(sc.currentSystem);
  });
});

sc.to.forEach(function(element) {

  element.addEventListener('click', function(e) {
    var toConvert = sc.display.textContent;
    var parsed;

    sc.targetSystemInt =
      e.currentTarget.getAttribute('data-system-number');

    sc.targetSystemString =
      e.currentTarget.getAttribute('data-system-string');

    switch (sc.currentSystem) {
      case 'bin':
        parsed = parseInt(toConvert, 2);
        break;
      case 'dec':
        parsed = parseInt(toConvert, 10);
        break;
      case 'hex':
        parsed = parseInt(toConvert, 16);
        break;
      default:
        console.log('Something has gone wrong.');
    }

    sc.btns.forEach(function(btn) {
      if (!btn.classList.contains('del') && !btn.classList.contains('not-selectable')) {
        btn.classList.add('not-selectable');
      }
    });

    sc.display.innerHTML =
      '<strong>' + toConvert + '</strong> <i>' +
      sc.currentSystem + '</i> => <strong>' +
      parsed.toString(+sc.targetSystemInt) +
      '</strong> <i>' + sc.targetSystemString + '</i>';
  });
});

sc.nums.forEach(function(btn) {
  btn.addEventListener('click', function() {
    var tmp = sc.display.textContent;

    sc.setState(sc.from, 'add', 'not-selectable');
    tmp = tmp.replace(/^0/, '');
    tmp += this.getAttribute('data-number-value');
    sc.display.textContent = tmp;
  });

});

sc.delete.addEventListener('click', function() {
  sc.display.textContent = 0;
  sc.setSystem('dec');
  sc.setState(sc.from, 'remove', 'not-selectable');
});

sc.setSystem('dec');

.wrap {
  max-width: 480px;
  margin: 20px auto;
  font-family: helvetica, arial, sans-serif;
}

.calculator {
  background-color: #cdcdcd;
  padding: 10px 20px;
  border-radius: 16px;
  border: 1px solid #000;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
}

.display {
  width: 100%;
  text-align: right;
  background: #efefef;
  background: linear-gradient(to right, #c5c5c5, #f4f4f4);
  padding: 10px 15px;
  border-radius: 6px;
  border: 1px solid #000;
  border-top: 2px solid #000;
  border-left: 2px solid #000;
  font-family: "courier new", sans-serif;
  font-size: 1.5em;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.description {
  font-size: 1.5em;
  padding-right: 2.0833%;
  min-width: 12.4998%;
}

.btn {
  border-radius: 12px;
  border: 1px solid #000;
  width: 4.16666%;
  height: 4.16666%;
  text-align: center;
  line-height: 20px;
  padding: 2.0833333%;
  margin: 1.0416%;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  position: relative;
  text-shadow: 1px 1px 1px #323232;
}

label {
  text-shadow: 2px 2px 2px #969696;
}

.system {
  width: 25%;
  background-color: #898989;
  color: white;
  font-weight: bold;
  font-size: 2em;
}

.num {
  background-color: #efefef;
}

.btn:hover {
  opacity: 0.5;
}

.btn:active {
  top: 2px;
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;
}

.del {
  color: orange;
  font-size: 1.5em;
}

.not-selectable {
  opacity: 0.2;
  pointer-events: none;
}

.selected, .reset:active {
  border-top: 2px solid #000;
  border-left: 2px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  color: #898989;
  background-color: white;
}

.message-board {
  font-weight: bold;
  font-family: georgia;
  font-size: 2em;
  text-align: center;
}

@media only screen and (max-width: 600px) {
  .message-board, .system, .description {
    font-size: 1em;
  }

  .display {
    font-size: 1em;
    padding: 10px 7px;
  }

  .btn {
    padding: 1.0416%;
  }
}

<div class="wrap">
  <div class="message-board">
    <p>Binary-Decimal-Hexadecimal Converter</p>
  </div>
  <div class="calculator">
    <div class="row">
      <div class="display">0</div>
    </div>

    <div class="row">
      <div class="description" title="Convert from which number-system? "><label>From</label></div>
      <div title="Convert FROM binary number-system ..." class="system from btn bin"
           data-system-string="bin" data-system-number="2">Bin</div>
      <div title="Convert FROM decimal number-system ..." class="system from btn dec"
           data-system-string="dec" data-system-number="10">Dec</div>
      <div title="Convert FROM hexadecimal number-system ..." class="system from btn hex"
           data-system-string="hex" data-system-number="16">Hex</div>
      <div class="system btn del reset" title="Reset converter-app">
        <i class="fa fa-refresh" aria-hidden="true"></i></div>
    </div>

    <div class="numbers">
      <div class="row">
        <div class="num btn bin dec hex" data-number-value="0">0</div>
        <div class="num btn bin dec hex" data-number-value="1">1</div>
        <div class="num btn dec hex" data-number-value="2">2</div>
        <div class="num btn dec hex" data-number-value="3">3</div>
        <div class="num btn dec hex" data-number-value="4">4</div>
        <div class="num btn dec hex" data-number-value="5">5</div>
        <div class="num btn dec hex" data-number-value="6">6</div>
        <div class="num btn dec hex" data-number-value="7">7</div>
      </div>
      <div class="row">
        <div class="num btn dec hex" data-number-value="8">8</div>
        <div class="num btn dec hex" data-number-value="9">9</div>
        <div class="num btn hex" data-number-value="A">A</div>
        <div class="num btn hex" data-number-value="B">B</div>
        <div class="num btn hex" data-number-value="C">C</div>
        <div class="num btn hex" data-number-value="D">D</div>
        <div class="num btn hex" data-number-value="E">E</div>
        <div class="num btn hex" data-number-value="F">F</div>
      </div>
    </div>        

    <div class="row">
      <div class="description" title="Convert to which number-system? "><label>To</label></div>
      <div class="system to btn bin" title="... convert TO binary number-system."
           data-system-string="bin" data-system-number="2">Bin</div>
      <div class="system to btn dec" title="... convert TO decimal number-system."
           data-system-string="dec" data-system-number="10">Dec</div>
      <div class="system to btn hex" title="... convert TO hexadecimal number-system."
           data-system-string="hex" data-system-number="16">Hex</div>
    </div>

  </div>
</div>

-- UPDATE -------

The problem was caused by using percentage on the padding (of the buttons).

After changing percentage to pixel the layout appeared as expected.

The new CSS:

.btn {
   ...
  padding: 5px;
  margin: 5px;
   ...
}

You're using percentage padding and margin on your flex items (`.btn`). The flexbox specification discourages both practices: http://stackoverflow.com/a/36783414/3597276 — Michael Benjamin, May 06 '16 at 16:15
You say developed with IE, but destroyed on Firefox. You didn't say what version of IE? — Bekim Bacaj, May 06 '16 at 19:17

score 0 · Answer 1 · edited May 07 '16 at 00:39

This is a browser version issue, I believe.

Depending on browser version, there are vendor differences on how flexbox is implemented. Check your browser version and try adding the vendor specific prefixes. You will likely need to adjust things as well, because browsers will never render identically. The best you can hope for is consistently similar.

Some prefix/version examples:

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;

  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;

I created a fiddle and your original CSS renders well, not perfectly for me in Firefox 46.0.1.

When you use percentage padding on margin of flex items, browsers results will vary: http://stackoverflow.com/a/36783414/3597276 — Michael Benjamin, May 06 '16 at 16:19
@whipdancer Thanks for your effort. I really appreciate it. But the issue was caused by using a padding with percentage. After changing that to fixed pixels it now works as expected. — mewi, May 07 '16 at 08:47

Flexbox-layout developed with IE but destroyed in Firefox. What's wrong here?

1 Answers1