PolymerElements / paper-button

A button à la Material Design
https://www.webcomponents.org/element/PolymerElements/paper-button
138 stars 64 forks source link

Scrolling / tapping issue on iOS #53

Closed kirilledelman closed 8 years ago

kirilledelman commented 9 years ago

This issue happens with paper-button, and some other Polymer elements I've tested - I don't know where I should file this issue, as it seems universal.

A button's action is triggered, after scrolling, which is not intended.

Inside a div with overflow: auto, a tall, scrollable page. Inside the page is a paper-button ( or paper-tabs, or your custom element with internal "click":"function" event ).

On mobile Safari - when your scroll starts on the button, after the page is scrolled, and finger is lifted, the button activates. This really hinders scrolling the page, as buttons that happen to fall in the path of the scrolling finger are activated.

Strangely, this doesn't seem to happen on elements with onclick="somefunc", or even non-button elements with on-click bindings. This also, doesn't happen if your scrolling is very rapid / flick. To reproduce - finger down on button for 1/2 sec, scroll up/down for 1/2 sec, finger up - seems to make it happen.

cdata commented 8 years ago

Hey @azakus , are you aware of any quirks in Mobile Safari that may cause a tap to be triggered in otherwise unexpected circumstances?

cdata commented 8 years ago

Unfortunately, I am unable to reproduce this behavior on iOS 8.1 Mobile Safari. Here is my test case: http://output.jsbin.com/nayine. Please re-open the issue if you think it can be reproduced somehow!