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] Vuetify Data tables render problem with Safari #6766

Closed
davellanedam opened this issue Mar 20, 2019 · 1 comment
Closed

[Bug Report] Vuetify Data tables render problem with Safari #6766

davellanedam opened this issue Mar 20, 2019 · 1 comment
Assignees
Labels
C: VDataTable VDatatable platform specific The issue only occurs on a specific platform
Milestone

Comments

@davellanedam
Copy link

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

@dsseng dsseng added the platform specific The issue only occurs on a specific platform label Mar 23, 2019
@davellanedam
Copy link
Author

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>

@MajesticPotatoe MajesticPotatoe added the C: VDataTable VDatatable label Apr 9, 2019
@johnleider johnleider assigned nekosaur and unassigned nekosaur Apr 26, 2019
nekosaur added a commit that referenced this issue Jun 17, 2019
when data-table was larger than viewport

closes #6766
@johnleider johnleider modified the milestones: v2.0.x, v2.0.0 Jun 18, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
C: VDataTable VDatatable platform specific The issue only occurs on a specific platform
Projects
None yet
Development

No branches or pull requests

6 participants