fix(devtools): add transform: translateZ(0) for Safari overflow rendering

[lihan3238]

Summary

Safari has a known issue where overflow: hidden with border-radius doesn't work correctly without hardware acceleration. This causes the devtools icon to render incorrectly in Safari.

Changes

Added transform: translateZ(0) and -webkit-transform: translateZ(0) to the background div element to force GPU compositing, which fixes the overflow rendering issue in Safari.

Fixes #10633

Test plan

• Open TanStack Query DevTools in Safari
• Verify the icon renders as a properly cropped pill shape
• Verify the icon still renders correctly in Chrome/Firefox

Summary by CodeRabbit

• Style
  • Improved devtools button rendering performance with GPU acceleration enhancements.

[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: d0c57c3b-6be6-47b6-af1a-08edb80510ba

📥 Commits

Reviewing files that changed from the base of the PR and between 0d63459 and 1c16749.

📒 Files selected for processing (1)

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

---

📝 Walkthrough

Walkthrough

Added GPU hardware acceleration CSS properties (-webkit-transform: translateZ(0) and transform: translateZ(0)) to the devtools button overlay styling to resolve a Safari rendering issue where the DevTools icon was not displaying correctly.

Changes

DevTools Button Styling Fix

Layer / File(s)	Summary
Safari Rendering Enhancement packages/query-devtools/src/Devtools.tsx	GPU acceleration via translateZ(0) transform added to devtoolsBtn overlay styles to fix icon rendering in Safari.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

🐰 A Safari bug made icons fade away,
But a tiny transform brought them back to play!
With translateZ and GPU's gentle push,
The DevTools now gleams without a rush. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding GPU-acceleration transforms to fix Safari rendering issues with the devtools button.
Description check	✅ Passed	The description clearly explains the Safari issue, the fix applied, the related issue reference, and includes a test plan covering all browsers.
Linked Issues check	✅ Passed	The PR directly addresses issue #10633 by implementing the required fix to make the DevTools icon render correctly as a pill shape in Safari using GPU acceleration.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing the Safari rendering issue; only GPU acceleration transforms were added to the devtools button styling with no unrelated modifications.
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.}

[ErikPervious]

Classic Safari hack — forces a compositor layer to fix overflow rendering quirks. Worked for similar cases I've hit. LGTM as a targeted fix.