LI list carousel position change

Question

Type on text input the overlapping slide to the right with enough text to cause the carousel to move middle it will move so that the first slide is off the screen from left side,

There after carousel behavior incorrect, realized this is a browser specific issue. Any idea to address please?

<div class="jcarousel-wrapper">

  <!-- Carousel -->
  <div class="jcarousel">
    <ul>
      <li>1<br><img src="https://sorgalla.com/jcarousel/examples/_shared/img/img1.jpg" width="150" height="100" alt=""><br><input type="text"></li>
      <li>2<br><img src="https://sorgalla.com/jcarousel/examples/_shared/img/img2.jpg" width="150" height="100" alt=""><br><input type="text"></li>
      <li>3<br><img src="https://sorgalla.com/jcarousel/examples/_shared/img/img3.jpg" width="150" height="100" alt=""><br><input type="text"></li>
      <li>4<br><img src="https://sorgalla.com/jcarousel/examples/_shared/img/img4.jpg" width="150" height="100" alt=""><br><input type="text"></li>
      <li>5<br><img src="https://sorgalla.com/jcarousel/examples/_shared/img/img5.jpg" width="150" height="100" alt=""><br><input type="text"></li>
      <li>6<br><img src="https://sorgalla.com/jcarousel/examples/_shared/img/img6.jpg" width="150" height="100" alt=""><br><input type="text"></li>
    </ul>
  </div>

  <!-- Prev/next controls -->
  <a href="#" class="jcarousel-control-prev">&lsaquo; Prev</a>
  <a href="#" class="jcarousel-control-next">Next &rsaquo;</a>

  <!-- Pagination -->
  <p class="jcarousel-pagination">
    <!-- Pagination items will be generated in here -->
  </p>

</div>

JS fiddle attached, please play around the issue.

Steps to reproduce.

1. After loading the caousel
2. You should see text input(bottom of most right image) overlap to most right
3. click the text input(bottom of most right image) and start typing.
4. once reach to its right, carousel move to middle.
5. now try to navigate using "next" and "pre"
6. behavior of carousel is incorrect