Элементы становятся размытыми в Flexslider

Question

Элементы становятся размытыми в Flexslider

0

Используя Flexslider, хотя это, вероятно, применимо и в других местах, иногда все элементы становятся размытыми/нечеткими. Это включает текст и границы. Это когда flexslider решает, что они должны быть смещены на 0,5 пикселя, я полагаю. Есть ли способ предотвратить этот эффект или смещение субпикселя? Я пробовал весь текстовый рендеринг.

Кроме того, переход на Chrome Dev Tools и удаление пикселов.5 пикселей, похоже, не исправить.

Одно исправление, по-видимому, отключает анимацию CSS, но затем они очень сильно отстают от мобильных устройств и не работают должным образом (они не прилипают к пальцу, они обновляются только после завершения салфетки).

Kallum Burgin 18 сен. 2013, в 00:38

Источник

Теги:

javascript

jquery

html

css

flexslider

2 ответа

0

Округление 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)
}

MaximusDecimus 26 дек. 2013, в 23:38

Ещё вопросы

Kallum Burgin · Accepted Answer · 2013-09-17T21-01-00.000Z

Удалось удалить его с помощью.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)
}

Это округляет число вниз.