fix: Safari DevTools icon rendering with isolation: isolate

[xxiaoxiong]

Summary

Fixes #10633

This PR fixes a Safari-specific rendering bug where the TanStack Query DevTools icon is not rendering properly. The pill-shaped background was not being cropped correctly, causing visual artifacts.

Problem

In Safari, the DevTools icon background extends beyond the intended pill shape, creating a visual rendering issue. The icon should appear as a clean pill with the background properly cropped to the rounded border.

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 container.

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.

Why isolation: isolate works

• Creates a new stacking context
• Forces Safari to properly apply overflow: hidden clipping
• Well-supported across all modern browsers (Chrome, Firefox, Safari, Edge)
• No performance impact
• No functional changes, only visual fix

Changes

• packages/query-devtools/src/Devtools.tsx
  • Add isolation: isolate to devtoolsBtn CSS (line 2760)

Testing

• Tested in Safari (latest version on macOS)
• Verified no regression in Chrome, Firefox, Edge
• The icon now renders correctly as a pill shape with proper background clipping

Before/After

Before (Safari):

• Background extends beyond the pill shape
• Visual artifacts around the icon edges

After (Safari):

• Clean pill shape
• Background properly clipped to rounded borders
• Matches the rendering in other browsers

Browser Compatibility

isolation: isolate is supported in:

• Chrome 41+
• Firefox 36+
• Safari 8+
• Edge 79+

References

• MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/isolation
• Related Safari rendering issues with filters and overflow

Summary by CodeRabbit

• Style
  • Improved CSS stacking behavior of the devtools button component for better layering with other interface elements.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f88f6726-8470-48e9-bfee-2be66fc201be

📥 Commits

Reviewing files that changed from the base of the PR and between a37c003 and 632bd67.

📒 Files selected for processing (1)

• packages/query-devtools/src/Devtools.tsx

---

📝 Walkthrough

Walkthrough

This PR adds the isolation: isolate; CSS property to the dev tools button container's style definition. This establishes a new CSS stacking context to resolve a Safari-specific rendering issue where the dev tools icon was not displaying properly.

Changes

Dev Tools Button Style Fix

Layer / File(s)	Summary
CSS Stacking Context packages/query-devtools/src/Devtools.tsx	Added isolation: isolate; to the devtoolsBtn style definition to create a new stacking context and fix Safari rendering of the dev tools icon button.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

A button was broken on Safari's screen, 🐰
The icon did vanish—a strange, sad scene.
With isolation: isolate, one line to apply,
Now the dev tools shine bright in the browser sky! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding isolation: isolate CSS to fix Safari DevTools icon rendering.
Description check	✅ Passed	The description provides comprehensive context: problem statement, root cause analysis, solution explanation, testing details, and browser compatibility. However, the required checklist items are not explicitly marked as completed.
Linked Issues check	✅ Passed	The PR directly addresses issue #10633 by implementing the CSS fix (isolation: isolate) to resolve the Safari DevTools icon rendering bug with proper pill-shaped background clipping.
Out of Scope Changes check	✅ Passed	All changes are scoped to the stated objective: a single CSS property addition to fix the Safari rendering issue. No unrelated code modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}