Используя Flexslider, хотя это, вероятно, применимо и в других местах, иногда все элементы становятся размытыми/нечеткими. Это включает текст и границы. Это когда flexslider решает, что они должны быть смещены на 0,5 пикселя, я полагаю. Есть ли способ предотвратить этот эффект или смещение субпикселя? Я пробовал весь текстовый рендеринг.
Кроме того, переход на Chrome Dev Tools и удаление пикселов.5 пикселей, похоже, не исправить.
Одно исправление, по-видимому, отключает анимацию CSS, но затем они очень сильно отстают от мобильных устройств и не работают должным образом (они не прилипают к пальцу, они обновляются только после завершения салфетки).
Удалось удалить его с помощью.slides и удалить -webkit-backface-visibility: hidden;
,
Чтобы сделать это постоянным, я удаляю строку из CSS
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;}
становится
.flexslider .slides > li {display: none;}
Кроме того, в файле javascript flexslider:
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)
}
Это округляет число вниз.
Округление float работало для меня без каких-либо изменений 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)
}