Can't scroll my web page by dragging/tapping the video area in iOS Sarafi

Question

I made angular based web page that can share videos, but scrolling page by dragging video element isn't working on iOS17 Safari browser. Chrome and Mozilla is working well without any issues.

I have attached my code here.

mvideo.component.html

<div [class]="containerClass" class="custom-video position-relative" *ngIf="src && !isVideoBroken">
    <video [src]="src + '#t=0.01'" id="video" [class]="className" (loadedmetadata)="onVideoLoad()"  (error)="onVideoError()" playsInline (click)="manage_video_play()">
        Sorry, your browser doesn't support embedded videos.
    </video>
</div>

mvideo.component.scss

.custom-video {
    >video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    -webkit-overflow-scrolling : touch !important;
    overflow: scroll;
}  

following is the rendered html

<app-mvideo _ngcontent-serverapp-c128="" _nghost-serverapp-c124="">
  <div _ngcontent-serverapp-c124="" class="custom-video position-relative ng-star-inserted">
    <video _ngcontent-serverapp-c124="" id="video" playsinline class="hide-video-controls radius-12 w-100" src="https://indiefire.io:3306/videos/fanpostvideo/romchos_1696613147607_v09044g40000cgkr01jc77u4hlksm9jg.mp4#t=0.01"> </video>
  </div>
</app-mvideo>

I checked the following articles, but not helpful. https://developer.apple.com/forums/thread/740225

https://codepen.io/gem0303/pen/qBgEeaG

Can't scroll inside video embed on iOS Safari

Answer 1

A related bug report has been filed on Safari's official bug tracker: Safari Bug Report #261563.

This bug prevents <video> elements from receiving drag, and thereby scroll events.

As a temporary fix, you can add an overlay to the <video> element so that the overlay, and not the <video> element, receives the drag events.

Here's an example using a pseudo-element. Just add this class to the <video>'s wrapping element, adjusting the z-index value as needed:

.fix-ios-17-vid-scroll::after {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  content: '';
  z-index: 10;
}

Answer 2

It appears that there is a bug in Safari on iOS 17.

A related bug report has been filed on Safari's official bug tracker: Safari Bug Report #261563. The issue has already been addressed and fixed by the Safari development team. However, as of now, Apple has not released a new iOS version that includes the bug fix.

In the meantime, consider checking for any announcements or release notes from Apple regarding upcoming iOS updates that may include the resolution for this particular bug.