Fix Safari rendering issues (#4333)

* Fix Safari rendering issues

Author: snowystinger

packages/react-aria-components/docs/GridList.mdx

@@ -114,6 +114,7 @@ import {GridList, Item, Button} from 'react-aria-components';
     color: var(--text-color);
     font-size: 1.072rem;
     position: relative;
+    transform: translateZ(0);
 
     &[data-focus-visible] {
       box-shadow: inset 0 0 0 2px var(--highlight-background);
@@ -159,12 +160,14 @@ import {GridList, Item, Button} from 'react-aria-components';
   @supports selector(:has(.foo)) {
     gap: 0;
 
-    & .react-aria-Item[aria-selected=true]:has(+ [aria-selected=true]) {
+    .react-aria-Item[aria-selected=true]:has(+ [aria-selected=true]),
+    .react-aria-Item[aria-selected=true]:has(+ .react-aria-DropIndicator + [aria-selected=true]) {
       border-end-start-radius: 0;
       border-end-end-radius: 0;
     }
 
-    & .react-aria-Item[aria-selected=true] + [aria-selected=true] {
+    .react-aria-Item[aria-selected=true] + [aria-selected=true],
+    .react-aria-Item[aria-selected=true] + .react-aria-DropIndicator + [aria-selected=true] {
       border-start-start-radius: 0;
       border-start-end-radius: 0;
     }

packages/react-aria-components/docs/Table.mdx

@@ -196,6 +196,8 @@ import {Table, TableHeader, TableBody, Column, Row, Cell} from 'react-aria-compo
   }
 
   .react-aria-Cell {
+    transform: translateZ(0);
+
     &:first-child {
       border-radius: 6px 0 0 6px;
     }
@@ -207,12 +209,14 @@ import {Table, TableHeader, TableBody, Column, Row, Cell} from 'react-aria-compo
 
   /* join selected items if :has selector is supported */
   @supports selector(:has(.foo)) {
-    .react-aria-Row[aria-selected=true]:has(+ [aria-selected=true]) .react-aria-Cell {
+    .react-aria-Row[aria-selected=true]:has(+ [aria-selected=true]) .react-aria-Cell,
+    .react-aria-Row[aria-selected=true]:has(+ .react-aria-DropIndicator + [aria-selected=true]) .react-aria-Cell {
       border-end-start-radius: 0;
       border-end-end-radius: 0;
     }
 
-    .react-aria-Row[aria-selected=true] + [aria-selected=true] .react-aria-Cell {
+    .react-aria-Row[aria-selected=true] + [aria-selected=true] .react-aria-Cell,
+    .react-aria-Row[aria-selected=true] + .react-aria-DropIndicator + [aria-selected=true] .react-aria-Cell {
       border-start-start-radius: 0;
       border-start-end-radius: 0;
     }
@@ -1081,6 +1085,7 @@ function Example() {
 .react-aria-Row {
   &[data-dragging] {
     opacity: 0.6;
+    transform: translateZ(0);
   }
 
   [slot=drag] {
@@ -1103,6 +1108,7 @@ function Example() {
 
 .react-aria-DropIndicator[data-drop-target] {
   outline: 1px solid var(--highlight-background);
+  transform: translateZ(0);
 }
 ```
 
@@ -1402,6 +1408,7 @@ function Example() {
 ```css
 .react-aria-DropIndicator[data-drop-target] {
   outline: 1px solid var(--highlight-background);
+  transform: translateZ(0);
 }
 ```
 
@@ -1471,6 +1478,7 @@ function Example() {
 ```css
 .my-drop-indicator.active {
   outline: 1px solid #e70073;
+  transform: translateZ(0);
 }
 ```