[Webkit-unassigned] [Bug 137313] New: Touchmove events do not bubble correctly when container has translate or translate3d applied to it

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=137313

           Summary: Touchmove events do not bubble correctly when
                    container has translate or translate3d applied to it
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: iOS
        OS/Version: Other
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: New Bugs
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: tedtate at gmail.com


Created an attachment (id=239049)
 --> (https://bugs.webkit.org/attachment.cgi?id=239049&action=review)
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

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.