Flexslider中的元素变得模糊

Question

使用Flexslider，虽然这可能适用于其他地方，但有时所有元素都会变得模糊/模糊。这包括文字和边框。我认为，当flexslider决定它们需要偏移0.5像素时。有没有办法防止这种效应发生，或者子像素偏移？我已经尝试了所有文本渲染。

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

一个修复似乎是禁用CSS动画，但是它们在移动设备上非常滞后并且无法正常工作（它不会粘在你的手指上，它只会在滑动完成后更新）。

Answer 1

通过从.slides元素中删除.5并删除-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)
}