@angular/cdk drag and drop dropzone likes to be outside of the original position when dropping in chrome browser but works fine in edge

Question

I am using ionic angular along with @angular/cdk drag and drop.

image here This is the chrome browser image where the actual boxes (dropzones) are behind the black boxes. When I drop any item on the dropzone my cursor shows that the dropzones are displaced from its original position. By the black boxes I have marked exactly where the dropzones are being shown.
But in the edge browser it is totally fine. It is in it's original position.

 <div class="example-container">
    <h2>Dropzone</h2>

    <div
      cdkDropList
      #todoList="cdkDropList"
      [cdkDropListData]="todo"
      [cdkDropListConnectedTo]="[doneList]"
      class="example-list"
      (cdkDropListDropped)="drop($event)"
    >
      @for (item of todo; track item) {
      <div class="example-box" cdkDrag></div>
      }
    </div>
  </div>

  <div class="example-container">
    <h2>Sidebar</h2>

    <div
      cdkDropList
      #doneList="cdkDropList"
      [cdkDropListData]="done"
      [cdkDropListConnectedTo]="[todoList]"
      class="example-list"
      (cdkDropListDropped)="drop($event)"
    >
      @for (item of done; track item) {
      <div class="example-box" cdkDrag>{{item}}</div>
      }
    </div>
  </div>

Tried many ways to solve it by deleting all necessary css. But didnt work.