Skip to content

Commit ceec8f0

Browse files
authored
fix(devtools): add transform: translateZ(0) for Safari overflow rendering (#10638)
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
1 parent ecd89c8 commit ceec8f0

1 file changed

Lines changed: 2 additions & 0 deletions

File tree

packages/query-devtools/src/Devtools.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2745,6 +2745,8 @@ const stylesFactory = (
27452745
right: -8px;
27462746
bottom: -8px;
27472747
border-radius: 9999px;
2748+
-webkit-transform: translateZ(0);
2749+
transform: translateZ(0);
27482750
27492751
& svg {
27502752
position: absolute;

0 commit comments

Comments
 (0)