Bootstrap 4 dropdown menu translate3d() incorrect position

Question

Have a multiple bootstrap 4.4.1 dropdown menus, each in a col which is working fine EXCEPT for the calculated position. HTML col Example

<div class="container">
  <div class="row">
    <div class="col">
      <div class="dropdown">
        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="snl-68778" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" tabindex="0"><div class="btn-txt">TEXT</div><div class="chevron-wrapper"><svg class="chevron"><use xlink:href="/img/chevron-white.svg#chevron"></use></svg></div></a>

        <div class="dropdown-menu" aria-labelledby="snl-68778" style="">
          <a class="dropdown-item" target="_blank" href="#" tabindex="0">Link 1</a>
          <a class="dropdown-item" target="_blank" href="#" tabindex="0">Link 2</a>
          <a class="dropdown-item" target="_blank" href="#" tabindex="0">Link 3</a>
          <a class="dropdown-item" target="_blank" href="#" tabindex="0">Link 4</a>
          <a class="dropdown-item" target="_blank" href="#" tabindex="0">Link 5</a>
        </div>
      </div>
    </div>
   // more columns here
  </div>
</div>

CSS:

.btn,
.dropdown-menu {
    width: 100%;
}
.btn{
  display: inline-block;
  padding: 8px 15px;
  border: none;
  background: #E5392A;
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  line-height: 18px;
  text-transform: uppercase;
}
.dropdown-menu{
  margin-top: 0;
  border: 0;
  padding: 0 10px;
  background-color: #211D17;
}
.chevron-wrapper {
  vertical-align: middle;
  display: inline-block;
  width: 36px;
  height: 26px;
  border-left: 1px solid #fff;
  margin-left: calc(100% - 115px);
  padding-left: 10px;
}
.dropdown.show .chevron {
  transform: rotate(90deg);
}
.chevron {
  display: inline-block;
  width: 26px;
  height: 26px;
}

I have 5 columns set up and the problem I have is the position of the dropdown menu in the first and last column:

1st: translate3d(5px, -244px, 0px);

5th: translate3d(-5px, -244px, 0px);

There is a 5px shift to the left/right and I have no idea what is causing that. If I reduce the number of cols to 4, I still get the same shift on the first / last columns.

is there a way of forcing the just first number in the calculated translate3d(5px, -244px, 0px) to always be 0? I tried transform: translateX(0), but that overrode the whole translate3d() setting, not just X

Any ideas

Answer 1

I found out what the error was in my case. Bootstrap uses Popper that calls many css modifiers to make sure the GUI looks good. The modifier that caused that translation in my case was the preventOverflow. I believe you should make sure your body and html elements (and maybe even other parents) are taking all the required space.

I set the height of html and body to 100% and on mobile screens it only takes 100% of the viewport which is less than the actual height of the page, so Popper.js thought I make an overflow.