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.

Sign up for GitHub

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

Jump to bottom

[DataGrid] Table custom actions won't push cell content on the left on hover in Safari #6851

Closed
dej611 opened this issue Jun 20, 2023 · 4 comments · Fixed by #6881
Closed

[DataGrid] Table custom actions won't push cell content on the left on hover in Safari #6851

dej611 opened this issue Jun 20, 2023 · 4 comments · Fixed by #6881
Assignees
@cee-chen
Labels
bug data grid

Comments

@dej611
Copy link
Contributor

dej611 commented Jun 20, 2023

Describe the bug

Custom cell actions should "shift" current cell content on the left on hover, but in Safari the value just sits behind it and potentially hidden.

data_grid_bug

I've managed to reproduce it also with Safari on the EUI data grid page: https://elastic.github.io/eui/#/tabular-content/data-grid

Environment and versions

  • EUI version: various
  • Kibana version (if applicable): 8.9.0
  • Browser: Safari 16.5 (17615.2.9.11.6, 17615)
  • Operating System: MacOS 12.6.5 (21G531)

To Reproduce
Steps to reproduce the behavior:

  1. Use Safari
  2. Hover a cell content where there are custom actions defined
  3. Values gets hidden by action icons

Expected behavior
The content gets shifted to the left at the end of actions as it happens with Chrome and Firefox.
@dej611 dej611 added bug ⚠️ needs validation For bugs that need confirmation as to whether they're reproducible data grid labels Jun 20, 2023
@cee-chen cee-chen removed the ⚠️ needs validation For bugs that need confirmation as to whether they're reproducible label Jun 26, 2023
@cee-chen
Copy link
Member

cee-chen commented Jun 26, 2023 •
edited
Loading

I can confirm this is not happening on FF/Chrome/Edge but is happening on latest Safari and on EUI production docs 🥲 Here we go debugging IE6 Safari again

@cee-chen cee-chen mentioned this issue Jun 26, 2023
Merged
4 tasks
@cee-chen
Copy link
Member

cee-chen commented Jun 26, 2023 •
edited
Loading

Alright, I have the world's dumbest workaround for this which will at least get the text visible in Safari, although the animation is significantly jumpier than Chrome/FF: https://eui.elastic.co/pr_6881/#/tabular-content/data-grid

This is 100% a Safari rerender bug that for some reason only affects :hover and not :focus. It also affects transition as well as animation. I've created a very minimum reproducible codepen for this (https://codepen.io/Cee-Chen/pen/PoxWeZa) and I've filed a webkit bug report with it in hopes that the very fine folks at Apple fix this 🐛

@cee-chen
Copy link
Member

Noting for completeness - while similar in visual behavior, this is not the same bug as #5828 (which occurs for data grids that have auto/fixed row heights, or row heights with more than 1 line).

This bug only occurs for Safari and single-line rows.

@cee-chen cee-chen self-assigned this Jun 26, 2023
@cee-chen
Copy link
Member

cee-chen commented Oct 9, 2023 •
edited
Loading

Noting this in case it comes up in future support items - EUI is reverting the Safari v16 workaround we implemented for this, as Safari v17 has been out for a while now. c5343af

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@cee-chen cee-chen

Labels
bug data grid
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[EuiDataGrid] Safari workaround for cell actions hover animation cee-chen/eui
2 participants
@cee-chen @dej611