Elements become blurry in Flexslider

Question

Using Flexslider, although this likely applies elsewhere, sometimes all the elements become blurry/fuzzy. This includes text and borders. It's when flexslider decides they need to be offset by .5 of a pixel, I assume. Is there a way to prevent this effect taking place, or the sub-pixel offset? I've tried all the text-rendering.

Also, going into Chrome Dev Tools and removing the .5 pixels doesn't seem to fix it.

One fix appears to be disabling the CSS animations, but then they go really laggy on mobile and don't really work properly (it doesn't stick to your finger, it only updates after the swipe is finished).

Answer 1

Managed to fix it myself by removing the .5 from the .slides element and removing the -webkit-backface-visibility: hidden;.

To make this permanent, I removing the line from CSS

.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;}

Becomes

.flexslider .slides > li {display: none;}

Also, in the flexslider javascript file:

if (r.transitions) {
    i = l ? "translate3d(0," + i + ",0)" : "translate3d(" + i + ",0,0)";
    n = n !== undefined ? n / 1e3 + "s" : "0s";
    r.container.css("-" + r.pfx + "-transition-duration", n)
}

Becomes

if (r.transitions) {
    i = Math.floor(parseFloat(i.slice(0,-2))) + "px";
    i = l ? "translate3d(0," + i + ",0)" : "translate3d(" + i + ",0,0)";
    n = n !== undefined ? n / 1e3 + "s" : "0s";
    r.container.css("-" + r.pfx + "-transition-duration", n)
}

This rounds the number down.