From 1c1674952a12a622081f514a9ab7686fb1d24984 Mon Sep 17 00:00:00 2001
From: lihan3238 <lihan3238@163.com>
Date: Tue, 5 May 2026 18:30:31 +0800
Subject: [PATCH] fix(devtools): add transform: translateZ(0) for Safari
 overflow rendering

Safari has a known issue where overflow: hidden with border-radius
doesn't work correctly without hardware acceleration. Adding
transform: translateZ(0) forces GPU compositing which fixes the
icon rendering issue.

Fixes #10633
---
 packages/query-devtools/src/Devtools.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
index 8e9b1f4a321..2fcd588f82d 100644
--- a/packages/query-devtools/src/Devtools.tsx
+++ b/packages/query-devtools/src/Devtools.tsx
@@ -2765,6 +2765,8 @@ const stylesFactory = (
         right: -8px;
         bottom: -8px;
         border-radius: 9999px;
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
 
         & svg {
           position: absolute;