137313 2014-10-01 14:17:20 -0700 Touchmove events do not bubble correctly when container has translate or translate3d applied to it 2024-05-27 10:39:27 -0700 1 1 1 Unclassified WebKit New Bugs 528+ (Nightly build) iPhone / iPad Other NEW https://bugs.webkit.org/show_bug.cgi?id=237470 https://bugs.webkit.org/show_bug.cgi?id=274654 P2 Normal --- 1 tedtate webkit-unassigned benjamin kpeatt stewart oldest_to_newest 1038649 0 239049 tedtate 2014-10-01 14:17:20 -0700 Created attachment 239049 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 1038660 1 benjamin 2014-10-01 14:45:01 -0700 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? 1038669 2 tedtate 2014-10-01 15:01:48 -0700 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) 1038671 3 tedtate 2014-10-01 15:08:37 -0700 A couple more: www.golfdigest.com (Photos carousel at the bottom of the page) www.wired.com 239049 2014-10-01 14:17:20 -0700 2014-10-01 14:17:20 -0700 Example html file which demonstrates the issue. index.html text/html 3023 tedtate PCFET0NUWVBFIGh0bWw+CjxodG1sPgogICAgPGhlYWQ+CiAgICAgICAgPHRpdGxlPjwvdGl0bGU+ CiAgICAgICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0 aCxpbml0aWFsLXNjYWxlPTEsbWF4aW11bS1zY2FsZT0xLHVzZXItc2NhbGFibGU9bm8iPgogICAg ICAgIDxzdHlsZT4KICAgICAgICAgICAgLmNvbnRhaW5lciAgewogICAgICAgICAgICAgICAgcG9z aXRpb246ICByZWxhdGl2ZTsKICAgICAgICAgICAgICAgIG92ZXJmbG93OiAgaGlkZGVuOwogICAg ICAgICAgICB9CgogICAgICAgICAgICAuaW5uZXIgewogICAgICAgICAgICAgICAgcG9zaXRpb246 ICByZWxhdGl2ZTsKICAgICAgICAgICAgICAgIHdoaXRlLXNwYWNlOiAgbm93cmFwOwogICAgICAg ICAgICAgICAgdGV4dC1hbGlnbjogIGxlZnQ7CgoKICAgICAgICAgICAgICAgIC13ZWJraXQtdHJh bnNpdGlvbi1wcm9wZXJ0eTogIC13ZWJraXQtdHJhbnNmb3JtOwogICAgICAgICAgICAgICAgLW1v ei10cmFuc2l0aW9uLXByb3BlcnR5OiAgLW1vei10cmFuc2Zvcm07CiAgICAgICAgICAgICAgICAt bXMtdHJhbnNpdGlvbi1wcm9wZXJ0eTogIC1tcy10cmFuc2Zvcm07CiAgICAgICAgICAgICAgICAt by10cmFuc2l0aW9uLXByb3BlcnR5OiAgLW8tdHJhbnNmb3JtOwogICAgICAgICAgICAgICAgdHJh bnNpdGlvbi1wcm9wZXJ0eTogIHRyYW5zZm9ybTsKICAgICAgICAgICAgfQoKICAgICAgICAgICAg Lml0ZW0gewogICAgICAgICAgICAgICAgZGlzcGxheTogaW5saW5lLWJsb2NrOwogICAgICAgICAg ICAgICAgd2lkdGg6IDEwMCU7CiAgICAgICAgICAgICAgICB2ZXJ0aWNhbC1hbGlnbjogIHRvcDsK ICAgICAgICAgICAgfQogICAgICAgIDwvc3R5bGU+CiAgICA8L2hlYWQ+CiAgICA8Ym9keT4KCiAg ICAgICAgPGgyPlByZXZpb3VzIC8gTmV4dCBjb250cm9sczwvaDI+CiAgICAgICAgPHA+Q2Fyb3Vz ZWwgd2l0aCBQcmV2aW91cyAvIE5leHQgY29udHJvbHMgdG8gYWR2YW5jZSBiZXR3ZWVuIGl0ZW1z LjwvcD4KICAgICAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIiPgogICAgICAgICAgPGRpdiBjbGFz cz0iaW5uZXIiPgogICAgICAgICAgICA8ZGl2IGNsYXNzPSJpdGVtIj4KICAgICAgICAgICAgICAg IDxpbWcgc3JjPSJodHRwOi8vbG9yZW1waXhlbC5jb20vMzAwLzMwMC9jYXRzLz8xIj4KICAgICAg ICAgICAgPC9kaXY+CiAgICAgICAgICAgIDxkaXYgY2xhc3M9Iml0ZW0iPgogICAgICAgICAgICAg ICAgPGltZyBzcmM9Imh0dHA6Ly9sb3JlbXBpeGVsLmNvbS8zMDAvMzAwL2NhdHMvPzIiPgogICAg ICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgPGRpdiBjbGFzcz0iaXRlbSI+CiAgICAgICAgICAg ICAgICA8aW1nIHNyYz0iaHR0cDovL2xvcmVtcGl4ZWwuY29tLzMwMC8zMDAvY2F0cy8/MyI+CiAg ICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICA8ZGl2IGNsYXNzPSJpdGVtIj4KICAgICAgICAg ICAgICAgIDxpbWcgc3JjPSJodHRwOi8vbG9yZW1waXhlbC5jb20vMzAwLzMwMC9jYXRzLz80Ij4K ICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgICAgIDxkaXYgY2xhc3M9Iml0ZW0iPgogICAgICAg ICAgICAgICAgPGltZyBzcmM9Imh0dHA6Ly9sb3JlbXBpeGVsLmNvbS8zMDAvMzAwL2NhdHMvPzUi PgogICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgIDwvZGl2PgogICAgICAgIDwvZGl2PgoKICAg ICAgICA8ZGl2IGNsYXNzPSJjb250cm9scyI+CiAgICAgICAgICAgIDxidXR0b24gY2xhc3M9ImFw cGx5LXRyYW5zbGF0ZSI+QXBwbHkgdHJhbnNsYXRlM2QoLTkwMHB4LCAwcHgsIDBweCkgdG8gLmlu bmVyPC9idXR0b24+CiAgICAgICAgICAgIDxidXR0b24gY2xhc3M9InRyaWdnZXItZml4Ij5FbmFi bGUgZml4PC9idXR0b24+CiAgICAgICAgICAgIDxwPgogICAgICAgICAgICAgICAgPHNwYW4+TnVt YmVyIG9mIHRvdWNobW92ZXMgZmlyZWQgb24gJy5pbm5lcic6PC9zcGFuPgogICAgICAgICAgICAg ICAgPHNwYW4gY2xhc3M9InRvdWNobW92ZS1jb3VudGVyIj4wPC9zcGFuPgogICAgICAgICAgICA8 L3A+CiAgICAgICAgPC9kaXY+CgogICAgICAgICA8c2NyaXB0IHNyYz0iLy9hamF4Lmdvb2dsZWFw aXMuY29tL2FqYXgvbGlicy9qcXVlcnkvMi4xLjEvanF1ZXJ5Lm1pbi5qcyI+PC9zY3JpcHQ+CiAg ICAgICAgPHNjcmlwdD4KICAgICAgICAgICAgdmFyIGNvbnRhaW5lciA9ICQoJy5jb250YWluZXIn KTsKICAgICAgICAgICAgdmFyIGlubmVyID0gJCgnLmlubmVyJyk7CiAgICAgICAgICAgIHZhciBp dGVtcyA9ICQoJy5pdGVtJyk7CiAgICAgICAgICAgIHZhciBhcHBseVRyYW5zbGF0ZSA9ICQoJy5h cHBseS10cmFuc2xhdGUnKTsKICAgICAgICAgICAgdmFyIHRyaWdnZXJGaXggPSAkKCcudHJpZ2dl ci1maXgnKTsKICAgICAgICAgICAgdmFyIGNvdW50ZXIgPSAkKCcudG91Y2htb3ZlLWNvdW50ZXIn KTsKICAgICAgICAgICAgdmFyIGNvdW50ID0gMDsKCiAgICAgICAgICAgIGlubmVyLm9uKCd0b3Vj aG1vdmUnLCBmdW5jdGlvbihlKSB7CiAgICAgICAgICAgICAgICBjb3VudCArPSAxOwogICAgICAg ICAgICAgICAgY291bnRlci5odG1sKGNvdW50KTsKICAgICAgICAgICAgfSk7CgogICAgICAgICAg ICB0cmlnZ2VyRml4Lm9uKCdjbGljaycsIGZ1bmN0aW9uKGUpIHsKICAgICAgICAgICAgICAgIGl0 ZW1zLm9uKCd0b3VjaG1vdmUnLCBmdW5jdGlvbihlKSB7CiAgICAgICAgICAgICAgICAgICAgcmV0 dXJuIHRydWU7CiAgICAgICAgICAgICAgICB9KTsKICAgICAgICAgICAgfSk7CgogICAgICAgICAg ICBhcHBseVRyYW5zbGF0ZS5vbignY2xpY2snLCBmdW5jdGlvbihlKSB7CiAgICAgICAgICAgICAg ICB2YXIgY3NzUHJvcCA9ICctd2Via2l0LXRyYW5zZm9ybTogdHJhbnNsYXRlM2QoLTkwMHB4LCAw cHgsIDBweCknOwogICAgICAgICAgICAgICAgJCgnLmlubmVyJykuYXR0cignc3R5bGUnLCBjc3NQ cm9wKTsKICAgICAgICAgICAgfSk7CiAgICAgICAgPC9zY3JpcHQ+CiAgICA8L2JvZHk+CjwvaHRt bD4=