Safari Glitch

by brandondurham

HTML

<div class="totals">
  <div class="row">
    <div class="cell--left">
      Total
    </div>
    <div class="cell--right">
      <small>USD</small> <strong id="total">$10.578.30</strong>
    </div>
  </div>
</div>

CSS

body {
  align-content: stretch;
  align-items: center;
  background: rgb(240, 240, 240);
  color: rgb(51, 51, 51);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  font: 24px/1.4 "Helvetica Neue", Helvetica, sans-serif;
  justify-content: center;
  height: 100vh;
}

.totals {
  box-shadow: 0 4px 0 rgb(83, 84, 84);
  font-feature-settings: "tnum";
  width: 400px;
}

.row {
  display: flex;
  padding-bottom: 18px;
}

.cell--left {
  font-weight: 700;
}

.cell--right {
  flex: 1 1 auto;
  text-align: right;
}

small {
  font-size: 0.8em;
}

JavaScript

const total = document.getElementById('total');
console.log(total.innerText);

const updateText = setTimeout(() => {
	total.innerText = '$3,922.77';
}, 2000);