icflorescu / icflorescu/mantine-datatable

table shadow ios bug

Open Beginner friendly
#791 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.3k
Forks
102
PR merge metrics
No merged PRs in 30d

Description

Describe the bug
Table shadows are incorrectly set in Safari on iOS.
iOS may scroll the container to a negative value.

To Reproduce
just check mobile safari on iphone

Expected behavior
the Y shadow on top should turn off if y <= 0

Screenshots

Image Image

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone15]
  • OS: [e.g. iOS17.5]
  • Browser [safari]

Additional context
It seems to be somewhere in the useDataTableInjectCssVariables hook -
function processScrolling() {
const newScrolledToTop = scrollTop === 0;

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by inspecting the useDataTableInjectCssVariables hook, especially processScrolling, then reproduce the behavior on mobile Safari using the linked scrollable example. Check how negative iOS scroll values affect the top Y shadow, and verify that the shadow is off when the effective position is at or below zero.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.