javascript - Flexslider中的元素变得模糊

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

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

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

最佳答案

设法通过从.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)
}

这将数字取整。

关于javascript - Flexslider中的元素变得模糊，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18860443/