[Bug Report] Vuetify Data tables render problem with Safari

[davellanedam]

Versions and Environment

Vuetify: 1.5.7
Vue: 2.6.9
Browsers: Safari 12.0.3, Safari
OS: Mac OS 10.14.3, iOS, Mac OSX

Steps to reproduce

I know this one should be easy, but I haven't been able to find the problem yet. I´m using Vuetify Data tables with external source, all is ok on any browser but Safari (MacOS and iOS).

Problem: When Data table is larger than the viewport it cannot render the background color after the viewport.

You can check repo here (comes with demo): https://github.com/davellanedam/vue-skeleton-mvp

Demo here: https://vue-demo.daniel-avellaneda.com

Credentials: admin@admin.com / 12345

Problem is at components adminCities.vue and adminUsers.vue

How to reproduce: Start safari with small window, then scroll Data table, or get Safari into responsive mode and choose iPhone 8 and then scroll Data table.

Before scroll: https://imgur.com/nimBnlG

After scroll: https://imgur.com/tGx2hgI

Any clues on how to fix this?

Expected Behavior

To render Data table background color including areas excluded from viewport

Actual Behavior

Before scroll: https://imgur.com/nimBnlG

After scroll: https://imgur.com/tGx2hgI

Reproduction Link

https://github.com/davellanedam/vue-skeleton-mvp

[davellanedam]

By removing style max-width: 100% from table.v-table in Safari devtools the problem is fixed. My workaround is overwriting that class:

<style>
table.v-table {
  max-width: none;
}
</style>