LinkOverlay covering entire body on chrome in a Tr LinkBox on Chrome

🐛 Bug report i want a table with rows that link on click. the following code snippet produces a link that covers the entire document body in Chrome, but not in Firefox:

import React from "react";
import { Table, Thead, Tr, Th, Td, Tbody, LinkBox, LinkOverlay } from "@chakra-ui/react";

export default function App() {
  return (
    <Table>
      <Thead>
        <Tr>
          <Th>Col</Th>
        </Tr>
      </Thead>
      <Tbody>
        <LinkBox as={Tr}>
          <Td>
            <LinkOverlay href="https://www.google.com">test</LinkOverlay>
          </Td>
        </LinkBox>
      </Tbody>
    </Table>
  );
}

💥 Steps to reproduce add a <LinkBox as={Tr}> as your table rows and add a LinkOverlay

💻 Link to reproduction https://codesandbox.io/s/billowing-sky-myimc?file=/src/app.js

🧐 Expected behavior only the table row is clickable, not the entire page. note that this works fine on firefox

[zebapy]

I can’t get the transform hack to work in Safari. Is it supposed to, as mentioned above? Otherwise newer chrome and FF support position on tr okay.

[rusakovic]

Confirm. Not working on Safari