I am using popper.js for displaying more post categories if trigger clicked. But after i click it, the initial position is wrong (more right). When popper opened and i scroll the position of popper is updated - this state need to be initial.

I found that CSS position transform of popper is calculated wrong for my usage. But don't understand, why it is recalculated to right number after scroll or any window resize. Check the Codepen below.

My JS:

$(function () {

 var element = document.getElementById('more-cats');

 var dropdown = document.getElementById('tooltip');



 var catsTooltip = new Popper ( element, dropdown, {

      placement: 'bottom-end'

 });



 $(element).click(function(e) {

      $(dropdown).toggle();

      e.preventDefault();

 });



});

Codepen

Thank you, if you have some ideas, what part of code i wrote wrong.