bxSlider background-image flickers in chrome

Question

I have a little problem. I use bxSlider but instead of <img> I use background-image. In chrome I see some flickering and I can't get rid of it. Maybe someone had a similar problem, tell me please how to treat :)

Here is my code

$('.bxslider').bxSlider();

.bxslider {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.bxslider li {
  height: 400px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<ul class="bxslider">
  <li style="background-image: url(http://lorempixel.com/1920/400/sports)"></li>
  <li style="background-image: url(http://lorempixel.com/1920/400/city)"></li>
</ul>

And you can also see it in JSFiddle

flicker seen in browser resolution 1700px and more

Answer 1

There is an option useCSS might be related to the flickers, set it to false and see.

useCSS

If true, CSS transitions will be used for horizontal and vertical slide animations (this uses native hardware acceleration). If false, jQuery animate() will be used.

default: true
options: boolean (true / false)