Merge pull request #459 from nextui-org/fix_458/blurred-popover-content

fix(react-popover): The content of the popover appears blurred Closes…
nextui-org · May 6, 2022 · a637869 · a637869
2 parents 0b0d936 + 1281c02
commit a637869
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/packages/react/src/popover/popover-content.tsx b/packages/react/src/popover/popover-content.tsx
@@ -7,7 +7,10 @@ import { CSS } from '../theme/stitches.config';
 import CSSTransition from '../utils/css-transition';
 import { __DEV__ } from '../utils/assertion';
 import { mergeRefs, ReactRef } from '../utils/refs';
-import { StyledPopoverContent } from './popover.styles';
+import {
+  StyledPopoverContentContainer,
+  StyledPopoverContent
+} from './popover.styles';
 import { usePopoverContext } from './popover-context';
 import { getTransformOrigin } from './utils';
 import clsx from '../utils/clsx';
@@ -67,7 +70,7 @@ export const PopoverContent = React.forwardRef(
     const { isFocusVisible, focusProps } = useFocusRing();
 
     const contents = (
-      <StyledPopoverContent
+      <StyledPopoverContentContainer
         ref={mergeRefs(overlayRef, ref)}
         {...getPopoverProps(
           mergeProps(
@@ -78,7 +81,7 @@ export const PopoverContent = React.forwardRef(
             otherProps
           )
         )}
-        className={clsx('nextui-popover-content', className)}
+        className={clsx('nextui-popover-content-container', className)}
         isFocusVisible={isFocusVisible}
         as={as}
         css={{
@@ -87,9 +90,11 @@ export const PopoverContent = React.forwardRef(
         }}
       >
         <DismissButton onDismiss={onClose} />
-        {children}
+        <StyledPopoverContent className="nextui-popover-content">
+          {children}
+        </StyledPopoverContent>
         <DismissButton onDismiss={onClose} />
-      </StyledPopoverContent>
+      </StyledPopoverContentContainer>
     );
 
     return (

diff --git a/packages/react/src/popover/popover.styles.ts b/packages/react/src/popover/popover.styles.ts
@@ -26,7 +26,7 @@ export const appearanceOut = keyframes({
   }
 });
 
-export const StyledPopoverContent = styled(
+export const StyledPopoverContentContainer = styled(
   'div',
   {
     /* variables */
@@ -73,3 +73,9 @@ export const StyledPopoverContent = styled(
   },
   cssFocusVisible
 );
+
+export const StyledPopoverContent = styled('div', {
+  /* Avoid blurriness */
+  transform: 'translateZ(0)',
+  backfaceVisibility: 'hidden'
+});