diff --git a/CHANGELOG.md b/CHANGELOG.md
index d1934a84c6..e7f7c1c11c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,6 +22,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Fixes
 - Fix `toggle` changing width during animation in Teams theme @mnajdova ([#2189](https://github.com/microsoft/fluent-ui-react/pull/2189))
+- Fix `Popup` positioning in multiple cases @layershifter ([#2187](https://github.com/microsoft/fluent-ui-react/pull/2187))
 
 <!--------------------------------[ v0.42.0 ]------------------------------- -->
 ## [v0.42.0](https://github.com/microsoft/fluent-ui-react/tree/v0.42.0) (2019-12-12)
diff --git a/packages/react/src/themes/teams/components/Popup/popupStyles.ts b/packages/react/src/themes/teams/components/Popup/popupStyles.ts
index dd410c3a51..97132d0ccf 100644
--- a/packages/react/src/themes/teams/components/Popup/popupStyles.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupStyles.ts
@@ -7,10 +7,17 @@ const popupStyles: ComponentSlotStylesPrepared<PopupProps, PopupVariables> = {
 
   popup: ({ variables: v }): ICSSInJSStyle => ({
     zIndex: v.zIndex,
-    position: 'absolute',
     textAlign: 'left',
     color: v.contentColor,
     background: v.contentBackgroundColor,
+
+    // Prevents scroll issue, waiting for Popper.js to add this style once initiated.
+    // https://github.com/mui-org/material-ui/issues/16740
+    position: 'fixed',
+    // Fix Popper.js initial positioning display issue
+    // https://github.com/mui-org/material-ui/issues/17774
+    top: 0,
+    left: '0px /* @noflip */',
   }),
 }
 
diff --git a/packages/react/src/utils/positioner/Popper.tsx b/packages/react/src/utils/positioner/Popper.tsx
index e488510264..fa1a7e6f50 100644
--- a/packages/react/src/utils/positioner/Popper.tsx
+++ b/packages/react/src/utils/positioner/Popper.tsx
@@ -11,16 +11,28 @@ import getScrollParent from './getScrollParent'
 // https://github.com/rollup/rollup/issues/1267#issuecomment-446681320
 const createPopper = (
   reference: Element | _PopperJS.ReferenceObject,
-  popper: Element,
+  popper: HTMLElement,
   options?: PopperJS.PopperOptions,
 ): PopperJS => {
   const instance = new ((_PopperJS as any).default || _PopperJS)(reference, popper, {
     ...options,
     eventsEnabled: false,
   })
+
+  const originalUpdate = instance.update
+  instance.update = () => {
+    // Fix Popper.js initial positioning display issue
+    // https://github.com/popperjs/popper.js/issues/457#issuecomment-367692177
+    popper.style.left = '0'
+    popper.style.top = '0'
+
+    originalUpdate()
+  }
+
   const actualWindow = popper.ownerDocument.defaultView
   instance.scheduleUpdate = () => actualWindow.requestAnimationFrame(instance.update)
   instance.enableEventListeners()
+
   return instance
 }
 /**
diff --git a/packages/react/test/specs/utils/__snapshots__/felaRenderer-test.tsx.snap b/packages/react/test/specs/utils/__snapshots__/felaRenderer-test.tsx.snap
index f98abd003c..819dd55629 100644
--- a/packages/react/test/specs/utils/__snapshots__/felaRenderer-test.tsx.snap
+++ b/packages/react/test/specs/utils/__snapshots__/felaRenderer-test.tsx.snap
@@ -117,6 +117,20 @@ exports[`felaRenderer keyframe colors are rendered 1`] = `
 "
 `;
 
+exports[`felaRenderer marginLeft is rendered into marginLeft due to RTL with \`noFlip\` 1`] = `
+".a {
+  margin-left: 10px; /* @noflip */
+}
+
+
+<div className=ui-provider__box dir=rtl>
+  <span className=ui-text a dir=auto>
+    Hello
+  </span>
+</div>;
+"
+`;
+
 exports[`felaRenderer marginLeft is rendered into marginRight due to RTL 1`] = `
 ".a {
   margin-right: 10px;
diff --git a/packages/react/test/specs/utils/felaRenderer-test.tsx b/packages/react/test/specs/utils/felaRenderer-test.tsx
index 4c3381f666..cda9c6cab6 100644
--- a/packages/react/test/specs/utils/felaRenderer-test.tsx
+++ b/packages/react/test/specs/utils/felaRenderer-test.tsx
@@ -106,7 +106,7 @@ describe('felaRenderer', () => {
 
   test('marginLeft is rendered into marginRight due to RTL', () => {
     const snapshot = createSnapshot(
-      <Provider rtl={true}>
+      <Provider rtl>
         <Text content="Hello" styles={{ marginLeft: '10px' }} />
       </Provider>,
       {},
@@ -115,6 +115,17 @@ describe('felaRenderer', () => {
     expect(snapshot).toMatchSnapshot()
   })
 
+  test('marginLeft is rendered into marginLeft due to RTL with `noFlip`', () => {
+    const snapshot = createSnapshot(
+      <Provider rtl>
+        <Text content="Hello" styles={{ marginLeft: '10px /* @noflip */' }} />
+      </Provider>,
+      {},
+      felaRenderer,
+    )
+    expect(snapshot).toMatchSnapshot()
+  })
+
   test('styles are expanded to longhand values', () => {
     const snapshot = createSnapshot(
       <EmptyThemeProvider>