Как пофиксить этот hover?

Question

[dhat]

Хочу немного исправить этот эффект и не могу никак додуматься как это сделать?
Когда наводишь на верхние 2 примера, то видно как появляется вертикальная линия в самом начале размером в 1 пиксель, т.е. цвет ховера показывать старый бекграунд. codepen.io/dhatt/pen/yaKdAr?editors=1100

Как убрать этот косяк?
апд - баг есть в Хроме, в ФФ нормально все.

Answer 1

[Ivan Bogachev]

Это известная проблема с округлениями в хроме. Можно таким образом подкостылить (проверил в Chrome 53):

.fun-hover {
    background-size: calc(200% + .5px);
}
.fun-hover:hover {
    background-position: calc(-100% - .5px);
}

Comments

[dhat]

Замечательно работает, спасибо!

Answer 2

[VoidVolker]

Это баг в стыковке начала и конца фона. В конце элементов виден тот же баг с другим цветом. Решается просто увеличением размера фона: codepen.io/anon/pen/VKXopo?editors=1100

Comments

[dhat]

Вариант но ваше решение меняет анимацию. В оригинале с багом она более приятная и плавная!

[VoidVolker]

Ну дык это же настраивается легко - просто меняем время на нужное и все.

[dhat]

VoidVolker: у вас время неизменное как в моем примере, тем не менее работает не так.