Popper-core: [Firefox/Safari] Popper attached to reference child of fixed element lags

[FezVrasta]

Reproducible on popper.js.org on the "star" tooltip.

edit:

The problem on popper.js.org has been fixed changing a bit the markup. The problem is visible here now:
http://codepen.io/FezVrasta/pen/ZKMWWg

[FezVrasta]

I created a repro here:
http://codepen.io/FezVrasta/pen/ZKMWWg

If someone finds a way to avoid any lag please let me know.

[john-griffin]

Thanks for the repro.

[wojtask9]

http://codepen.io/anon/pen/mmzbpp

On FF you should call requestAnimationFrame(update) once again in RAF callback.
See first note https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame

It helps a little bit with Chrome but 'lag' still exists :/

[FezVrasta]

No I don't call requestAnimationFrame inside the update method because I don't want an uncontrolled animation like the one described in the MDN docs. I want updates only when fired by scroll.

[wojtask9]

Yeah. That's not the best solution. But I'm afraid you must do something similar.

Otherwise you must play with more than scroll event.

http://codepen.io/anon/pen/qmJrjv
this example fixes mouse events ('lag' still occurs with UP, DOWN keys on keyboard, touchevents, etc)

[FezVrasta]

Update, the website was fixed changing the position of the popper to be child of the same fixed container.

I'd still like to find a solution to this problem, since Popper.js itself doesn't seem to perform badly. For instance, I created a codepen where a popper followed the cursor and there wasn't any noticeable lag at all.

[wojtask9]

Are you observing 'lag' on this https://codepen.io/anon/pen/eRBXmp
On my machine (FF) I can't see the lag.

This is the key of my fix.
document.addEventListener('wheel', update);
document.addEventListener('mousedown', update)
document.addEventListener('scroll', update);

'scroll' event is not enough because when you use wheel first event fired by browser is 'wheel'.
On this event browser will start scroll.
The same situation is when you click mouse on scrollbar. First event is 'mousedown'.
'mousedown' is tricky because not every mousedown is about scrolling.

[FezVrasta]

On Firefox is butter smooth, on Chrome it lags a bit.

[wojtask9]

Yeah it is better in Chrome but lag still occurs.
This is because you use 'smooth scrolling' in Chrome.
If you turn off 'smooth scrolling' in Chrome lag disappear.

[john-griffin]

Still lags in Safari too.

[FezVrasta]

I think this will be closed once the current popper.js@next release moves to stable. The related PR is https://github.com/FezVrasta/popper.js/pull/487

It's not an automatic way to fix the problem but you can just set the flag to get it stop lag.

Can you guys confirm?

[john-griffin]

Tried with 1.13.0-next and set the positionFixed to true, still seeing lag in all browsers.

[MrFrankel]

I think this latests version fixes this,
heres a plunker demo, try it with positionFixed true & false and see the difference.
https://plnkr.co/edit/Ui8fhDhkdVgWAs4YSDha?p=preview

[atomiks]

@MrFrankel

In the previous CodePen posted above, Chrome 65 is 100% smooth while FF 57 experiences minor stutters and Safari 11 is very glitchy

In the new version (your plnkr link), it's 100% smooth in all browsers for me, so it seems fixed.

[john-griffin]

Still seeing lag in all browsers with 1.13.0-next.1.

[FezVrasta]

@john-griffin are you able to provide a codepen that reproduces the problem with next.1?

[MrFrankel]

@john-griffin is this with positionFixed option set to true?

[john-griffin]

Yeah with positionFixed. I'm testing it on our production app (which uses ember + liquid-fire) so its tricky to reproduce.

[MrFrankel]

including chrome? cause the original issue is only FF and Safari

[john-griffin]

Yeah always happened in Chrome for us too.

[MrFrankel]

im using it in production with our app and its smooth, I think we will need some more information on you use case, perhaps you are using transform somewhere? that tends to change the way fixed is calculated in bowsers.