Vuetify: [Bug Report] V-ripple misbehavior in chrome

Created on 10 Aug 2020  路  1Comment  路  Source: vuetifyjs/vuetify

Environment

Vuetify Version: 2.3.8
Vue Version: 2.6.10
Browsers: Google Chrome, Opera
OS: Ubuntu undefined

Steps to reproduce

Click on any table row.

Expected Behavior

Ripple working inside the row

Actual Behavior

ripple target seems to be the whole table

Reproduction Link

https://codepen.io/willcolmenares/pen/vYGOWoG

Other comments

Works ok in firefox. but with chrome and opera doesn't work properly.

VDataTable VRipple bug has workaround platform specific upstream

Most helpful comment

In CSS 2.1 position: relative doesn't work on table elements: https://www.w3.org/TR/CSS21/visuren.html#propdef-position

Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=417223

Workaround:

tr {
  transform: scale(1)
}

>All comments

In CSS 2.1 position: relative doesn't work on table elements: https://www.w3.org/TR/CSS21/visuren.html#propdef-position

Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=417223

Workaround:

tr {
  transform: scale(1)
}
Was this page helpful?
0 / 5 - 0 ratings

Related issues

dschreij picture dschreij  路  3Comments

SteffenDE picture SteffenDE  路  3Comments

sebastianmacias picture sebastianmacias  路  3Comments

jofftiquez picture jofftiquez  路  3Comments

smousa picture smousa  路  3Comments