From 632bd67cbd0342367c9afd50ef8a9ce5fb2ffaac Mon Sep 17 00:00:00 2001
From: xxiaoxiong <2482929840@qq.com>
Date: Sat, 9 May 2026 16:46:08 +0800
Subject: [PATCH] fix: Safari DevTools icon rendering with isolation: isolate

Fixes #10633

Problem:
The TanStack Query DevTools icon is not rendering properly in Safari.
The pill-shaped background is not being cropped correctly, causing
visual artifacts.

Root Cause:
Safari has issues with nested overflow: hidden + absolute positioning
+ negative margins. The background blur div extends beyond the container
bounds (top/left/right/bottom: -8px) and Safari doesn't properly clip
it despite overflow: hidden on the parent.

Solution:
Add 'isolation: isolate' to the devtoolsBtn container. This creates a
new stacking context that forces Safari to properly respect the
overflow: hidden boundary. The isolation property is specifically
designed to fix rendering issues with filters and blending modes in
nested contexts.

Changes:
- packages/query-devtools/src/Devtools.tsx
  - Add 'isolation: isolate' to devtoolsBtn CSS

Impact:
- Fixes the visual rendering bug in Safari
- No impact on other browsers (isolation: isolate is well-supported)
- No functional changes, only visual fix
---
 packages/query-devtools/src/Devtools.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
index 8e9b1f4a321..30a57947132 100644
--- a/packages/query-devtools/src/Devtools.tsx
+++ b/packages/query-devtools/src/Devtools.tsx
@@ -2757,6 +2757,7 @@ const stylesFactory = (
       border-radius: 9999px;
       box-shadow: ${shadow.md()};
       overflow: hidden;
+      isolation: isolate;
 
       & div {
         position: absolute;