bug(md-button): hover state should not be styled for touchdevices

[sonderbazz]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When you tap on a button it shouldn't trigger the hover state - it should just do the click on the first touch.

What is the current behavior?

The hover state i triggered so the user has to double tap to use buttons

What are the steps to reproduce?

Try tapping on a button on a touch device. Bug found on a IOS safari device.

Plunker template: http://plnkr.co/edit/o077B6uEiiIgkC0S06dd

What is the use-case or motivation for changing an existing behavior?

Pretty annoying for mobileusers that have to double tap on buttons.

Which versions of Angular, Material, OS, browsers are affected?

Primarily IOS devices - but pretty much any touchdevice. Bug started after the lastest release of ng-material (flannel-papaya)

Is there anything else we should know?

[tinayuangao]

I cannot reproduce this bug consistently. Could you please provide more details? Is the hover state triggered every time you tap on a button?

[sonderbazz]

On iOS the bug is consistent. When I tap once - it triggers hover. And if I don't double tap it will just continue triggering the hover state.

Here's the rule that's producing the error:
https://github.com/angular/material2/blob/master/src/lib/button/button.scss @ line 11

Normally I would just style it via modernizr's no-touchevents class's but then you would force ppl to use modernizr. In mediaquery 4 we will get feature detection for pointer devices
https://www.w3.org/TR/mediaqueries-4/#pointer
But again this isn't 100% supported by browsers yet.

It's a bit tricky imo :/

[tinayuangao]

I tried buttons on my iOS safari and the click is triggered by a single tap. https://material.angular.io/components/component/button

Could you please provide a plunker? The :hover on iOS should work without display: none or visibility change.

[sonderbazz]

Hmm webcode is a odd and funny business.
When I make a plunker it works fine. iOS works fine with only one tap. Just like you said.

But when I use it in our webproject - it only works on double tap. Sadly I can't share code with you since it's a commercial webproject.
I have tried removing ALL my custom styling - still the same. So weird.

But I will have to dig deeper into this - and somehow find a solution to my problem.
Sorry for the time you wasted on this.

Although I find styling hover states for mobile is not good practice.
And it's weird that this suddenly became a problem after the release of flannel-papaya - since it has working fine untill now.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}