javascript - Flexslider 中的元素变得模糊

Question

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

此外，进入 Chrome 开发工具并删除 0.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)
}