Font blurry after animation on chrome

[Karthons]

Issue description: On chrome there is a bug with animation that sets the font blurry. See: https://bugs.chromium.org/p/chromium/issues/detail?id=521364

Steps to reproduce: Create a slider with text sliders (a special css / html setup might be needed) and slide once. As soon as a transform is applied to the ul element, the font is blurry. If you go back to the original state of the slider, the text is normal again.

This bug happens sporadically and might not be of the scope of this library. Here is a fix for those who are fighting with this bug:

function roundCssTransformMatrix(selector) {
  var el = document.querySelectorAll(selector);
  el.forEach(function(element) {
    var mx = window.getComputedStyle(element, null); //gets the current computed style
    element.style.transform = ""; //resets the redifined matrix to allow recalculation, the original style should be defined in the class not inline.
    mx = mx.getPropertyValue("-webkit-transform") ||
      mx.getPropertyValue("-moz-transform") ||
      mx.getPropertyValue("-ms-transform") ||
      mx.getPropertyValue("-o-transform") ||
      mx.getPropertyValue("transform") || false;
    var values = mx.replace(/ |\(|\)|matrix/g, "").split(",");
    for (var v in values) {
      values[v] = Math.ceil(values[v]);
    }
    element.style.transform = "matrix(" + values.join() + ")";
  });
};

roundCssTransformMatrix(.tns-slider);

Demo link/slider setting:
var slider = tns({ container: '.tabs', items: 6, slideBy: 'page', loop: false, mouseDrag: true, autoplayButtonOutput: false, nav: false, prevButton: document.querySelector('button[data-controls="prev"]'), nextButton: document.querySelector('button[data-controls="next"]'), });

Tiny-slider version: 2.8.6 Browser name && version: Google Chrome 69.0.3497.92 OS name && version: Window 10

[ganlanyuan]

@Karthons Thanks. This is interesting to me, but I couldn't reproduce this issue. Would you mind to make a demo for this?

[dolbex]

@ganlanyuan This is indeed an issue and no fault of Tiny but there is a solution for it which you can find here:

https://stackoverflow.com/questions/27385126/chrome-font-appears-blurry/42256897#42256897

Based on the feedback on both the Chrome Bug thread and the stack it seems to solve the problem.