Initial position of popper and arrow elements off when margins exist

Using the react-popper repository (version 0.8.0) and running npm run dev, I am seeing the initial positioning of popper and arrow elements slightly “off” when margins exist on the popper element. I’m not sure if this is react-popper or popper.js causing this, but since I am using react-popper, I thought I would at least start here to see if others are seeing the same issue. If the popper element doesn’t have any margins, it seems to work correctly.

In the first screenshot, I am showing the appearance of the example page immediately after the initial page load. I’ve annotated the issues I am seeing. The second screenshot shows it properly adjusted after a small scroll of the page.

I am able to work around this issue by removing margin styles and replacing them with adjusted top or left position values (with an !important to override inline styles), but it still seems like there is a minor issue here.

Screenshot 1 (initial page load)

Screenshot 2 (after scrolling)

[FezVrasta]

Stuff like that usually happens when Popper is initialized while the element is still being rendered

[greg-a-smith]

On a separate note, I am seeing the following error when attempting to do an npm install:

> fsevents@1.1.3 install /Users/I846506/dev/react-popper/node_modules/fsevents
> node install

[fsevents] Success: "/Users/I846506/dev/react-popper/node_modules/fsevents/lib/binding/Release/node-v51-darwin-x64/fse.node" is installed via remote

> husky@0.14.3 install /Users/I846506/dev/react-popper/node_modules/husky
> node ./bin/install.js

husky
setting up Git hooks
done


> uglifyjs-webpack-plugin@0.4.6 postinstall /Users/I846506/dev/react-popper/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js


> react-popper@0.8.2 prepare /Users/I846506/dev/react-popper
> npm run build


> react-popper@0.8.2 prebuild /Users/I846506/dev/react-popper
> rimraf dist && mkdir dist


> react-popper@0.8.2 build /Users/I846506/dev/react-popper
> npm run build:lib && cross-env NODE_ENV=production webpack --config webpack.prod.config.js


> react-popper@0.8.2 build:lib /Users/I846506/dev/react-popper
> babel src --out-dir lib

src/Arrow.jsx -> lib/Arrow.js
src/Manager.jsx -> lib/Manager.js
src/Popper.jsx -> lib/Popper.js
src/Target.jsx -> lib/Target.js
src/react-popper.js -> lib/react-popper.js
/Users/I846506/dev/react-popper/webpack.prod.config.js:65
  )
  ^
SyntaxError: Unexpected token )
    at Object.exports.runInThisContext (vm.js:78:16)
    at Module._compile (module.js:543:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at requireConfig (/Users/I846506/dev/react-popper/node_modules/webpack/bin/convert-argv.js:97:18)
    at /Users/I846506/dev/react-popper/node_modules/webpack/bin/convert-argv.js:104:17
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-popper@0.8.2 build: `npm run build:lib && cross-env NODE_ENV=production webpack --config webpack.prod.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-popper@0.8.2 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/I846506/.npm/_logs/2018-02-07T18_20_40_243Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-popper@0.8.2 prepare: `npm run build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-popper@0.8.2 prepare script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/I846506/.npm/_logs/2018-02-07T18_20_40_361Z-debug.log

I am still able to run npm run dev and see the examples, but this should probably be cleaned up.