Flexslider中的元素变得模糊

Question

使用Flexslider，尽管这可能适用于其他地方，但有时所有元素都会变得模糊/模糊。 这包括文本和边框。 我假设是flexslider决定将它们偏移0.5像素时。 有没有办法防止这种效果发生，或者防止子像素偏移？ 我已经尝试了所有的文本渲染。

此外，进入Chrome开发工具并删除.5像素似乎也无法解决。

一种解决方法似乎是禁用CSS动画，但是随后它们在移动设备上变得非常缓慢，并且不能真正正常工作（它不粘在您的手指上，仅在滑动完成后才更新）。

Answer 1

通过从.slides元素中删除.5并删除了-webkit-backface-visibility: hidden;设法自己解决此问题-webkit-backface-visibility: hidden; 。

为了使其永久不变，我从CSS中删除了这一行

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

成为

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

另外，在flexslider javascript文件中：

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)
}

成为

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)
}

这将数字取整。

Answer 2

四舍五入对我没有任何CSS更改的工作。 谢谢！

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)
}