fix(Popper): disable gpuAcceleration

CHANGELOG.md

@@ -25,6 +25,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Accessibility improvements for `tree` and `splitButton` @kolaps33 ([#2032](https://github.com/stardust-ui/react/pull/2032))
 - Update color scheme values in Teams theme @codepretty ([#2063](https://github.com/stardust-ui/react/pull/2063))
 - Fixing a core keydown disconnect issue @dzearing ([#2056](https://github.com/stardust-ui/react/pull/2056))
+- Fix blurry content of Popup @jurokapsiar ([#2067](https://github.com/stardust-ui/react/pull/2067))
 
 ### Features
 - Add `menu` prop on `ToolbarMenuItem` component @mnajdova ([#1984](https://github.com/stardust-ui/react/pull/1984))

packages/react/src/lib/positioner/Popper.tsx

@@ -92,6 +92,13 @@ const Popper: React.FunctionComponent<PopperProps> = props => {
     const modifiers: PopperJS.Modifiers = _.merge(
       { preventOverflow: { padding: 0 } },
       { flip: { padding: 0, flipVariationsByContent: true } },
+      /**
+       * This prevents blurrines in chrome, when the coordinates are odd numbers
+       * alternative would be to use `fn`, call _PopperJS.default.Defaults.modifiers.computeStyle.fn(data, options)
+       * and manipulate the computeed style or ask popper to fix it
+       * but since there is presumably only handful of poppers displayed on the page, the performance impact should be minimal
+       */
+      { computeStyle: { gpuAcceleration: false } },
       /**
        * When the popper box is placed in the context of a scrollable element, we need to set
        * preventOverflow.escapeWithReference to true and flip.boundariesElement to 'scrollParent' (default is 'viewport')

packages/react/src/themes/teams/components/Toolbar/toolbarMenuItemStyles.ts

@@ -12,6 +12,7 @@ const toolbarMenuItemStyles = {
     })
 
     return {
+      position: 'relative',
       color: v.menuItemForeground || colors.foreground1,
       borderWidth: v.menuBorderWidth,
       backgroundColor: 'transparent',
@@ -22,7 +23,6 @@ const toolbarMenuItemStyles = {
       maxWidth: '100%',
       padding: v.menuItemPadding,
       cursor: 'pointer',
-      position: 'relative',
 
       ':focus': {
         outline: 0,
@@ -47,15 +47,15 @@ const toolbarMenuItemStyles = {
   },
 
   activeIndicator: ({ variables: v }): ICSSInJSStyle => ({
-    float: 'right',
-    position: 'fixed',
+    position: 'absolute',
     right: pxToRem(7),
+    top: pxToRem(7),
   }),
 
   submenuIndicator: ({ variables: v }): ICSSInJSStyle => ({
-    float: 'right',
-    position: 'fixed',
+    position: 'absolute',
     right: pxToRem(7),
+    top: pxToRem(7),
   }),
 
   wrapper: () => ({