Getting a 1 pixel shift occasionally during flipping

[briankitt]

https://github.com/pqina/flip/assets/3027960/49d8c9d6-3839-408c-baa6-171264b5ef9c

If you watch the video, there is occasionally a 1 pixel shift back and forth. Not all the time, just on occasion. My best guess, is that this is likely a css rounding error somewhere.

            <div class="tick tick-flip-money" style="font-size: 3em">
              <div data-value-mapping="indexes" data-layout="horizontal fit"
                data-transform="arrive(.2) -> round -> pad(000000000) -> split -> delay(ltr, 100, 150)">

                <span class="tick-text-inline-onwhite">$</span>

                <span data-view="flip" data-style="flip-easing: ease-in-quart"></span>
                <span data-view="flip" data-style="flip-easing: ease-in-quart"></span>
                <span data-view="flip" data-style="flip-easing: ease-in-quart"></span>

                <span class="tick-text-inline">,</span>

                <span data-view="flip" data-style="flip-easing: ease-in-quart"></span>
                <span data-view="flip" data-style="flip-easing: ease-in-quart"></span>
                <span data-view="flip" data-style="flip-easing: ease-in-quart"></span>

                <span class="tick-text-inline">,</span>

                <span data-view="flip" data-style="flip-easing: ease-in-quart"></span>
                <span data-view="flip" data-style="flip-easing: ease-in-quart"></span>
                <span data-view="flip" data-style="flip-easing: ease-in-quart"></span>
              </div>

Code behind

      var element = document.querySelector('.tick');
      this.tick = Tick.DOM.create(element, {
        value: total,
        didInit: function (tick) {
          var timer = Tick.helper.interval(function () {
            tick.value += perSecond;
          }, 1000);

[rikschennink]

I think the counter parent element might change width? Perhaps you can set it to a fixed width. Could also be the font size, could also be triggered by CSS transforms.

[briankitt]

I found the issue. I am using a custom font, 'gotham light'. I'd be happy to upload my woff file if you want to test this out.

.tick [data-view]

Has max-width defined in em, but the font size is variable. My guess, is that the browser is changing the width depending if it's a '1' or an '8' because the '1' obviously takes up far less width then the 8 does.

You should be able to easily recreate this problem with the code above, and using 'gotham light' font.

[WillsB3]

I also had this issue and fixed it by specifying a fixed width for each flipper like this…

.tick-flip {
  width: 1.125em;
}