Bug 137313 - Touchmove events do not bubble correctly when container has translate or translate3d applied to it
Summary: Touchmove events do not bubble correctly when container has translate or tran...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: New Bugs (show other bugs)
Version: 528+ (Nightly build)
Hardware: iPhone / iPad Other
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2014-10-01 14:17 PDT by Ted Tate
Modified: 2022-03-04 09:12 PST (History)
3 users (show)

See Also:


Attachments
Example html file which demonstrates the issue. (2.95 KB, text/html)
2014-10-01 14:17 PDT, Ted Tate
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Ted Tate 2014-10-01 14:17:20 PDT
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
Comment 1 Benjamin Poulain 2014-10-01 14:45:01 PDT
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?
Comment 2 Ted Tate 2014-10-01 15:01:48 PDT
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)
Comment 3 Ted Tate 2014-10-01 15:08:37 PDT
A couple more:

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