Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug Report][2.5.8] small flickering black box when disabling / enabling a v-card with an click handler in an timeline item #14193

illmat opened this issue Sep 24, 2021 · 3 comments
C: VTimeline VTimeline T: bug Functionality that does not work as intended/expected


Copy link

illmat commented Sep 24, 2021


Vuetify Version: 2.5.8
Vue Version: 2.6.14
Browsers: Chrome 93.0.4577.82
OS: Linux x86_64

Steps to reproduce

  1. open codepen
  2. click the "toggle disable" button a few times
  3. see the flickering box on in front of the first card

Expected Behavior

no flickering

Actual Behavior


Reproduction Link

@glen-84 glen-84 added C: VCard VCard T: bug Functionality that does not work as intended/expected labels Sep 24, 2021
Copy link

glen-84 commented Sep 24, 2021

The v-card seems to get a v-card--link class when you add a click handler.

Copy link

KaelWD commented Sep 25, 2021

v-card--link uses ::before for a focus overlay, and v-timeline uses it for the arrow.

Copy link

ryoluo commented Oct 14, 2021

It could be solved by adding some styles on .v-timeline-item__body > .v-card:not(.v-card--flat)::before to invalidate styles of v-card--link::before. Can I make PR?

bottom: auto
opacity: unset
background: none

// Wedge
> .v-card:not(.v-card--flat)
&:before, &:after
content: ''
position: absolute
border-top: $timeline-wedge-size solid transparent
border-bottom: $timeline-wedge-size solid transparent
border-right: $timeline-wedge-size solid black
top: calc(50% - #{$timeline-wedge-size})
border-right-color: inherit
top: calc(50% - #{$timeline-wedge-size} + 2px)

ryoluo added a commit to ryoluo/vuetify that referenced this issue Oct 14, 2021
@KaelWD KaelWD self-assigned this Jun 15, 2022
@KaelWD KaelWD added this to the v2.6.x milestone Jun 15, 2022
@KaelWD KaelWD added C: VTimeline VTimeline and removed C: VCard VCard labels Jun 15, 2022
@KaelWD KaelWD closed this as completed in 27ba2c9 Jun 15, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
C: VTimeline VTimeline T: bug Functionality that does not work as intended/expected
None yet

Successfully merging a pull request may close this issue.

4 participants