Buttons have strange double tap issue on mobile

[maxyharr]

All buttons seem to have a strange double tap behavior (sometimes the tap won't even register) on mobile devices (touch events supposedly). Is there a workaround or bugfix for this in the works?

After installing the polymerStarterKit and starting it up with
~$ yo polymer
....
~$ gulp serve
I see this weird double tap thing when visiting the page (ip address and port) from a mobile device.
Safari & Chrome on iPad and iPhone

[addyosmani]

Could you confirm if you're able to see the same behaviour on Safari/Chrome on iOS using the following links:

https://elements.polymer-project.org/elements/paper-button?view=demo:demo/index.html
https://elements.polymer-project.org/elements/paper-toolbar?view=demo:demo/index.html ?

Knowing which buttons you're experiencing the double tap issue with would also be very helpful. Thanks!

[maxyharr]

I am not seeing the same behavior on the page you linked to, neither on the buttons in the header nor the sample buttons on the page. 
Another bug came up however just now on that page, similar to one I have been experiencing with paper menu on my computer:
If I scroll down the page and try to click something, it zooms me back up to the top of the page instead.
Back to the original issue. The buttons I was originally referring to were the header bar icon buttons. The menu one on the left, and the other two on the right.

On Wed, Sep 23, 2015 at 7:40 AM -0700, "Addy Osmani" notifications@github.com wrote:

Could you confirm if you're able to see the same behaviour on Safari/Chrome on iOS using the following links:

https://elements.polymer-project.org/elements/paper-button?view=demo:demo/index.html

https://elements.polymer-project.org/elements/paper-toolbar?view=demo:demo/index.html ?

Knowing which buttons you're experiencing the double tap issue with would also be very helpful. Thanks!

—
Reply to this email directly or view it on GitHub.

[semateos]

I'm having a similar issue, not sure if it's the same one - but mine seems related to page.js - not polymer elements. I'm experiencing missing navigation events on mobile, where the nav element will appear clicked, but the pushstate url change doesn't happen. I believe that page.js improperly attempts to switch between touch vs. click events here:
https://github.com/visionmedia/page.js/blob/master/page.js#L22

In iOS 9.1 safari document.ontouchstart is not defined at the time of the check and so it ends up attaching click events instead of touchstart events. My guess is that the nav elements use the polymer tap gesture and some of the clicks are not actually clicks... or something like that. I've not gotten to the bottom of it yet.

In any case it seems that page.js is currently not well maintained and may be a poor fit for implementing routing and pushstate in polymer land. See:

visionmedia/page.js#315

Are there known good alternatives for pushstate routing in polymer 1.0?

[RuedigerMoeller]

have similar issues with polymer starter app based application and scroll header buttons.

[ebidel]

Is PSK using native shadow dom? If so, it might be Polymer/polymer#2607

[RuedigerMoeller]

no I am using webcomponents_lite . I have several issues with the app
template (1.1) on IPhone+. However most probably not all caused by polymer
bugs ;). However the "have-to-click-buttons-twice" thingy also appears on
firefox/linux this time for paper button.
I'll dig deeper once I start addressing cross platform .. still in initial
buildup with my project ..

2015-10-23 20:59 GMT+02:00 Eric Bidelman notifications@github.com:

Is PSK using native shadow dom? If so, it might be Polymer/polymer#2607
Polymer/polymer#2607

—
Reply to this email directly or view it on GitHub
#380 (comment)
.

[RuedigerMoeller]

looking at Polymer/polymer#2607 , you might be right .. still quite a noob regarding shadow shady and native shadow dom .. not sure about when these flavours are used :)

[ebidel]

Native SD is opt-in, so unless PSK is using it by default then you won't run into #2067. That's why I asked in #380 (comment). @addyosmani?

[RuedigerMoeller]

No I just used defaults. Seems to me as if all "on-click" handlers are affected (made a js button from a div).

[robdodson]

Seems like a duplicate of #166

[chuckh]

Fix menu not working in FF 38 #470 fixed this issue.

[ghost]

I am having a similar issue and its hard to pin down.

The problem for me is not that the ripple effect is not firing. In all browsers is it firing.
The problem is that the click event (in my case a navigation based on anchor ref), will not fire, unless the button is pressed twice.

This issue is in FF and Safari. On Chrome its fine.

So, perhaps this is not a good test of the error, because there is no navigation as part of the test ?
https://elements.polymer-project.org/elements/paper-button?view=demo:demo/index.html

Another example is the Hamburger icon in the PSK.
On all browsers it works.
When i use it in a project it does not work. There is something in my project messing it up.
My project is a copy of the PSK, but with other things added.