Bug 137313 – Touchmove events do not bubble correctly when container has translate or translate3d applied to it

• Status: NEW
• Component: New Bugs

[Ted Tate]

Created attachment 239049 [details]
Example html file which demonstrates the issue.

Hello all,

I've found an issue on the version of WebKit currently shipping in iOS 8 that seems to cause touchmove events not to bubble when they are inside of containers that have -webkit-transform: translate or translate3d applied.

The issue does not occur on iOS7 or other previous version. I'm unsure of how to test this in WebKit nightly build due to this issue seeming to only manifest itself with touchmove events specifically.

This issue is causing problems with sites that use both the ucarousel and scooch carousel plugins.

----

Steps to Reproduce:

1) Open attached minimal test case HTML either on iOS 8 device or iOS 8 simulator
2) Cause some touchmove events to fire by touching on the cats inside of the fake 'carousel', notice the touchmove counter increasing.
3) Press the 'apply translate3d(-900px, 0px, 0px) to .inner button
4) Attempt to cause some more touch move events on the carousel.

Result:

The touchmove counter no longer increases after '-webkit-transform: translate3d(-900px, 0px, 0px)' is applied to '.inner' element.

Expected Results:

The touchmove events should continue to fire.

----

Workarounds:

Currently there are two workarounds that I know of to fix this issue.

1) Bind an empty handler to an element in the bubbling chain between the source of the touch move and '.inner'. If you press 'enable fix' in the attached test case this is what is enabled.

items.on('touchmove', function(e) {
    return true;
});

2) Add the following CSS to one of the elements in the bubbling chain:

.item { -webkit-transform: translate(0); transform: translate(0); }

----

Additional Resources:

1) Bug Reports:

https://github.com/mobify/scooch/issues/23
https://github.com/nrsedat/uCarousel/issues/1

[Benjamin Poulain]

Thanks for filing a bug report.

I am adding to my touch event bug list. What is the impact? Do you know any website affected by this?

[Ted Tate]

Currently affected sites:

http://www.sharperimage.com/
http://www.perfumania.com/
http://www.tommybahama.com/ (this one is slightly less obvious due to the auto-advancing, but it should be swipeable)

[Ted Tate]

A couple more:

www.golfdigest.com (Photos carousel at the bottom of the page)
www.wired.com