Slide "resetting" position during drag phase

[netpoetica]

If you drag a slide just enough, it does not click back into place. Then, when you go to click again to move to the next slide, it jumps back into place. This is present on your current website: http://stereobit.github.io/dragend/

You can see a video of this behaviour here: https://dl.dropboxusercontent.com/u/30820392/dragend%20reset.m4v

I discovered this while trying to make some modifications to your source - if I come across a solution or suspected piece of code, I will update the issue - in the meantime, I figured I would in case you might have some insight. Thanks!

EDIT: this is in Google Chrome v31. I tried to verify in Firefox (version 25), but your website and lib are misfiring and mostly no op in Firefox. Additionally, it looks like the suspect code is the -webkit-transform when it gets set during setStyles - this line:

element.style[property] = value;

as soon as that line runs with property = "-webkit-transform" and value = ""translateX(0px)", the slide has a reset.

[Stereobit]

Hi, thanks for the bug report. I'll try to fix this as soon as possible.

[Stereobit]

Hi,

this problem seems to be related to the event bubbling of the drag events when you have a dragend container in a dragend container. I've added a stopPropagation option to prevent bubbling of all events. For the demo it helps.

I also added a quickfix for Firefox. The behaviour is still a bit buggy when having nasted dragend container but at least it works now.

[netpoetica]

Thanks for looking into this. The vertical swipe on your main page is still very buggy in Chrome - the calcNewPage function doesn't seem to work, the smooth "glide" into next page is very jumpy. Additionally, it now resets the vertical slider.

https://www.dropbox.com/s/rqxdqjx411bzpf0/dragend-vertical.mov

[pedroaragon360]

I found an easy fix. It is true that there is a bug when you slide to the left, as it doesn't come back to the original position if the threshold is not reached, curiosly this doesn't happen when dragging towards right (forward). How to fix it: Change this:

} else if (parsedEvent.distanceX > 0 || parsedEvent.distanceX > 0) { this._scrollToPage(); }

to this

} else { this._scrollToPage(); }

Apparently, the if verification doesn't come true when verifying the threshold distance backwards, so if you ommit that if, it will always go back to the original place if the forward/back page event doesn't apply.

[Stereobit]

@pedroaragon360 Can you create a pull request if you think this is bug that should be solved :)?

[pedroaragon360]

My first pull. Great script by the way, but it would be great if you find time to fix scrolling, my solution (shown in the other issue thread) may be inefficient, and have to work with two listeners... Thanks.

[Stereobit]

Thanks. I'll have a look into the pull request soon. Not sure if it doesn't raise other bugs when you remove that conditions. I'll try to solve the scrolling as soon as I find some more time ...

[pedroaragon360]

Great, but I just found out that it doesn't work with IE 11 (including last release) nor Windows phone, its a petty.. shame I can't be of much help there.

[netpoetica]

@pedroaragon360 is it the fix that doesn't work on IE11 or the whole lib?

[pedroaragon360]

The script itself seems not to work in IE 11, my fix resolves the issue we talked about without any subyacent bugs, at least that I could experience.

[netpoetica]

Interesting. I do not have access to IE11 unfortunately but I would be curious if it is an error that is occurring (like you would see the error in the console) or if the script simply just doesn't do anything?

[pedroaragon360]

I dont see any errors in the console, it looks like the events don't work. I have made a timeout loop script which forces the slides to move, and they work, what it does not work is the swipe event listener, it just doesn't do anything, like it does not recognice the interaction. I am sorry for this series of bugs, but as I need to use some production scripts, I look forward on using this: http://www.idangero.us/sliders/swiper/demos.php

It may help looking the code up for inspiration?