Различная позиция абсолютного элемента, которая зависит от используемого устройства или браузера

Question

Я пытаюсь решить проблему с кнопкой позиционирования над существующим div. Если на рабочем столе или на мобильном телефоне android все в порядке, кнопка Iphone находится в другом месте.

Вот как это выглядит (карандашный элемент):

Муравей, вот как это выглядит Iphone:

Так что я завернул его в родительском контейнере, который имеет position relative и карандаш, который вы видите, это 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>

И это app-image-upload-button само по себе:

<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 для позиции :

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

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

Может кто-нибудь помочь мне решить эту проблему? Спасибо!