Mobile demo ignores hardware hover about hover-on-touch

[vin-ni]

Maybe i should add a general :hover selector to the plugin? That way the plugin would also cover desktop devices and the galaxy note?

But then the plugin would force the same behavior on desktop devices. Maybe developers Would like some Fade in which works ux wise on Hover but Not on taphold.

Or I could add css
.cover:hover {
Visibility:hidden;
}
To the documentation?

What do you think?

Am 20.04.2016 um 07:38 schrieb BTMPL [email protected]:

Some devices have a way to trigger the hover state on their own - for example Samsung Galaxy Note comes with a pen, that triggers the :hover selector when hovering over an element.

In your demo the animations aren't triggered when that happens - might want to add it so that both touch and hover work.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub

[BTMPL]

You might try adding a general :hover selector but restricting it with a media query to only target mobile?

[vin-ni]

ok, I might have to rewrite some stuff.
right now the plugin hides the elements. So I cant use the css:hover pseudo element.
I'll change everything to opacity change instead

[vin-ni]

I rewrote everything so there's now a fallback for devices like the galaxy note.
Unfortunately the rest of the script can't be applied by css (like restarting the gif).

[vin-ni]

@BTMPL I guess you have a galaxy note? Would you mind testing if it works?
I updated the demo :)

[BTMPL]

It mostly works, but there's a weird, probably will be hard to debug.

1. Hover the pen over an element - the statte will trigger (animation plays etc)
2. Put your finger over the same element and try to scroll the page, all while the pen is still hovering the element. It will not move (hovering over an element blocks the scroll by default, not part of your lib)
3. Move the pen away.
4. Try to scroll the page again - it will move.
5. Hover the pen above the element - hovered state is not triggered, touching the element still works fine though

[vin-ni]

Hmm, so that rather a css bug no?
I'm wondering to add also a mouseover function to the script (for desktop(. I think that would also resolve the problem. Because here, css is interfering with javascript I think.
Do you think it would be useful to add a mouseover function?

1. On the other hand coders might want to add their own mouseover function, which would get really complicated to make customable with a script
2. I'm wondering if this plugin shouldn't stay touchdevice only. I dont want to build a hover library :P

[BTMPL]

I'd say it's a Browser / Software bug.

I wanted to debug this behaviour with Chrome Inspect Device but as soon as I connect to the tab running on my phone it loses all the hover effects of pen - no matter if it's on your demo or any other page (a simple codepen fails :hover too).

You might want to roll back to the previous commit and revisit this in the future if anyone else reports this issue.

[vin-ni]

ok :)