search

unovue / radix-vue

Vue port of Radix UI Primitives. An open-source UI component library for building high-quality, accessible design systems and web apps.
https://radix-vue.com
MIT License
3.72k stars 233 forks source link

[Bug]: Tooltip appearance issues with touch-devices #1223

Closed 7iomka closed 3 months ago

7iomka commented 3 months ago

Environment

Developement/Production OS: MacOS 14.5 / Android 14.0
Node version: 18.20.3
Package manager: pnpm@8.6.0
Radix Vue version: 1.9.4
Vue version: 3.4.37
CSS framework: tailwindcss@3.4.9
Client OS: MacOS 14.5 / Android 14.0
Browser: Chrome latest

Link to minimal reproduction

https://stackblitz.com/edit/mus4ig?file=components%2Ftooltip%2FTooltipContent.vue,layouts%2FLayoutDefault.vue,pages%2Findex%2F%2BPage.vue

Steps to reproduce

Describe the bug

I see unexpected appearance issues on touch devices. Tooltip content very quickly appears and hide. Another strange behavior is that when we leave the page (go to another tab) and come back - the content will be visible!

Expected behavior

I expected fallback behavior for hover events for touch devices to work exactly the same

Context & Screenshots (if applicable)

Video with animation appearance classes enabled:

https://github.com/user-attachments/assets/f2b17952-d431-490e-a87f-6581edfaf73b

Video without animation appearance classes enabled:

https://github.com/user-attachments/assets/65c4d131-d60d-4654-86e8-69e2dec3811a

zernonia commented 3 months ago

Thanks for the issue @7iomka ! Seems like there's some error running the reproduction 😬 Also can't seems to reproduce the issue on touch-devices

7iomka commented 3 months ago

https://stackblitz.com/edit/mus4ig?file=components%2Ftooltip%2FTooltipContent.vue,layouts%2FLayoutDefault.vue,pages%2Findex%2F%2BPage.vue

Hello. Fixed repro.

zernonia commented 3 months ago

Thanks for the issue @7iomka ! Seems like the tooltip was being render a split second causing the animation to flickers. Happening on https://www.shadcn-vue.com/docs/components/tooltip.html too. Looking into this 😁

7iomka commented 2 months ago

@zernonia Hi. Issue still present on touch devices. https://stackblitz.com/edit/mus4ig?file=components%2Ftooltip%2FTooltipContent.vue,layouts%2FLayoutDefault.vue,pages%2Findex%2F%2BPage.vue

I tried different workarounds, like

    :delay-duration="200"
    :skip-delay-duration="100"
    disable-closing-trigger

but, unfortunately, tooltips opens randomly, one for 3-4 attempts when I click to different triggers. https://stackblitz.com/edit/mus4ig-qbqn4u?file=components%2Ftooltip%2FTooltipContent.vue,components%2Ftooltip%2FTooltipProvider.vue,pages%2Findex%2F%2BPage.vue

Why this happens? I think we need to find real workaround to have normal worked tooltips

7iomka commented 2 months ago

@zernonia Any news on this?