Different position of absolute element that depends on used device or browser

I'm trying to resolve problem with positioning button over existing div. Once everything is fine on desktop or android mobile, then on Iphone button is in different place.

This is how it suppouse to looks like (pencil element):

Ant this is how it looks on Iphone:

So I have it wrapped in parent container that has position relative and pencil that You can see is absolute:

<div class="position-relative">
      <button
        *ngIf="!user.UserInfo.ProfilePicture"
        class="user-avatar-btn h-100-px w-100-px cc-grey-500-txt">
        {{ user.UserInfo | userInfoInitials }}
      </button>
      <img
        *ngIf="user.UserInfo?.ProfilePicture"
        [src]="user.UserInfo.ProfilePicture"
        class="user-avatar-btn h-100-px w-100-px"
      />
      <app-image-upload-button class="bottom-right-icon" (fileEvent)="editPhoto($event)"></app-image-upload-button>
</div>

And this is app-image-upload-button itself:

<input
  #imageInput
  hidden="true"
  type="file"
  onclick="this.value=null"
  (change)="changeEvent($event.target.files)"
  [accept]="imageValidFileTypes"
/>
<span (click)="imageInput.click()"
  class="cc-white-bg d-flex justify-content-center align-items-center w-35-px h-35-px cursor-pointer border-circle">
  <mat-icon class="cc-grey-400-txt">{{'create'}}</mat-icon>
</span>

CSS for position:

.bottom-right-icon {
 filter: drop-shadow(0px 0px 12px #c4c4c4);

 ::ng-deep span {
   position: absolute;
   left: -30px;
   top: 15px;
 }
}

Can someone help me how to resolve this problem? Thanks!