Horizontal Scroll Reverts to Original Scroll Position

I have a simple horizontal scroll bar. Whenever I attempt to the scroll to the right and release the mouse click, the horizontal bar immediately reverts back to the original positioning. I have no idea why this is happening. I want the scroll to stick when I release the mouse click, not revert back to the original position. Code below.

HTML

<ion-scroll direction="x" class=" wide-item">
      look at dog    <img src="http://www.cdc.gov/animalimportation/images/dog2.jpg" width="70" height="70">
      look at dog    <img src="http://www.cdc.gov/animalimportation/images/dog2.jpg" width="70" height="70">
      look at dog    <img src="http://www.cdc.gov/animalimportation/images/dog2.jpg" width="70" height="70">
      look at dog    <img src="http://www.cdc.gov/animalimportation/images/dog2.jpg" width="70" height="70">
      look at dog    <img src="http://www.cdc.gov/animalimportation/images/dog2.jpg" width="70" height="70">
      look at dog    <img src="http://www.cdc.gov/animalimportation/images/dog2.jpg" width="70" height="70">
      look at dog    <img src="http://www.cdc.gov/animalimportation/images/dog2.jpg" width="70" height="70">
      look at dog    <img src="http://www.cdc.gov/animalimportation/images/dog2.jpg" width="70" height="70">
</ion-scroll>

CSS

.wide-item {
  width: 1000%;
  overflow-x: scroll; 
  -webkit-overflow-scrolling:touch; 
  display: inlnine;
}

img {
  display: inline;
}

Codepen here.