You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
We're using the sp-card component in a horizontal scroll div and noticed a rather odd behavior in the hover state with some touch devices such as iOS and Android.
Generally, when user swipes left and right to scroll there's no issue but if the user happen to tap on the card for a second before swiping (tapping down and swipe) it caused the targeted sp-card to be stuck in the hover state. The state persist even after the user has lift the finger. The only way to stop that hover state is when you tap on another element. While this seems like an expected behavior here, the question is should the sp-card component be smarter to handle such scenario and stop the hover state? Are there other suggestions?
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
We're using the
sp-card
component in a horizontal scroll div and noticed a rather odd behavior in the hover state with some touch devices such as iOS and Android.Generally, when user swipes left and right to scroll there's no issue but if the user happen to tap on the card for a second before swiping (tapping down and swipe) it caused the targeted
sp-card
to be stuck in the hover state. The state persist even after the user has lift the finger. The only way to stop that hover state is when you tap on another element. While this seems like an expected behavior here, the question is should thesp-card
component be smarter to handle such scenario and stop the hover state? Are there other suggestions?I created an example here that you can try with on Android device browser:
https://studio.webcomponents.dev/preview/8Rtcfz63mRf3KEr2mALH/stories?p=stories
Beta Was this translation helpful? Give feedback.
All reactions