react-popover

react-popover copied to clipboard

Be carefull, this is a random render error :( Environment : OSX ElCapitain + Firefox Developer Edition 43.0.3 Not visible on Chrome

Popover configuration:

body={<MyComponent/>}
isOpen={this.state.isOpen}
place="column"
preferPlace="above"

When you go hover and out the element, the popover come from the top left unexpectedly instead from the top. After investigations, it seems that Firefox apply the transition before to style the popover. The two timers (enteringAnimationTimer1 & enteringAnimationTimer2) prove that was an old bug :(

My hack was to add transition-delay :

transition-delay: 0.1s;

Unfortunately it doesn't work, the delay must be provide after transition.

Adding it in source fix the bug:

_this2.containerEl.style['transition-delay'] = '0.1s';
_this2.containerEl.style[cssprefix('transition-delay')] = '0.1s';

Can you validate it and make a add it it the next release ?

This issue may be affected by #64. Can you install from master and try?

Related to this, My screen is pretty narrow (mobile site) and the popover animates up/down movement and opacity. The settings seem to work fine but I would rather animate the height and width to 0, and use react-motion for this if possible.

@bazzooka I think I'm having the same issue. Where did you put these lines to fix it?

_this2.containerEl.style['transition-delay'] = '0.1s';
_this2.containerEl.style[cssprefix('transition-delay')] = '0.1s';

@iKonrad Hi,

You can find the code into the closed pull request named Issue #62

Good luck,

I have this weird glitch too on the first open. The popover comes from an edge. Not sure if it is the same.. ?

FWIW I'm on the latest Chrome.

I did some investigations: it turns out that the popover triggers a resize event once (this one), during the initial transition. Hence the first incorrect position. After the first toggle, the popover poisiton is good.