Not working in the Safari browser

[abince]

Describe the bug

The grid does not work in Safari

To Reproduce

1. Open the link through the Safari browser

Link to code example:

Expected behavior

Should work like other browsers

Environment

• react-data-grid version: 7.0.0-beta.14 (Same issue even in 7.0.0-beta.18)
• react/react-dom version: 18.1.0

Additional context

[leandher]

Same issue here, any updates?

[devnaumov]

Any updates? Seems like a critical bug

[amanmahajan7]

Which version of safari are you using?

[paustint]

This works fine in Safari for me with the provided link and from my local project.

[csulit]

Mine is working.

[xuyunan]

Same issue in 钉钉app, any updates?

[damnitrahul]

I see the same issue on Version 14.1.1 (16611.2.7.1.4).

[amanmahajan7]

Please ensure you are importing styles.css. import 'react-data-grid/lib/styles.css';

Also, only latest version of safari is supported.

[tienle]

Same issue on Safari 15.1, Mac OSX Monterey

[medvedev-da]

Hi guys!

You've developed the great grid that fits my project requirements up to 90%, but... Seems like it stopped working correctly right after 7.0.0.-beta-16 in Safari and on Huawei tablets (Huawei browsers).

I see it's working more or less in 7.0.0-beta-16, but not in later versions. Do you have any plans to fix it?

Starting from 7.0.0.-beta-17 I needed to add the import import "react-data-grid/lib/styles.css", and starts crashing... Before I haven't had this import at all.

[isacvale]

I'm getting this bug on Safari 14.1, but not on later versions. I believe it is because of browser issues with display: contents. The grid defines template columns, then there are rows - divs with display contents-, then comes the cells.

Any workaround?

[amanmahajan7]

We need display:contents and I am not sure if there is a workaround. I am closing this issue as it is working in the latest version of safari

[rahulserver]

I am on safari latest version and grid is not working. I have correctly imported the style.css file. It works fine in chrome, but not in safari.

my safari version: 16.4

[rahulserver]

also if this helps, here is my code(next js app index.ts)

import 'react-data-grid/lib/styles.css';
import DataGrid from 'react-data-grid';
const columns = [
  { key: 'id', name: 'ID' },
  { key: 'title', name: 'Title' }
];

const rows = [
  { id: 0, title: 'Example' },
  { id: 1, title: 'Demo' }
];


export default function Home() {
  return (
    <>
      <DataGrid columns={columns} rows={rows} />
    </>
  )
}

package.json:

{
  "name": "errorv13",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "20.11.19",
    "@types/react": "18.2.57",
    "@types/react-dom": "18.2.19",
    "next": "14.1.0",
    "react": "18.2.0",
    "react-data-grid": "^7.0.0-beta.42",
    "react-dom": "18.2.0",
    "typescript": "5.3.3"
  }
}

[superlucky84]

@rahulserver After struggling with Safari 16.x for a while, I upgraded to 17.5 and it worked fine. good luck