[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.

[MohRaouf]

With the following simple setup of the carousel, in angular 17

@if (dataList$ | async; as items) {
	@if (items.length) {
		<owl-carousel-o [options]="customOptions" (dragging)="isDragging = $event.dragging">
			@for (item of items; track item) {
				<ng-template carouselSlide [id]="item.id"> </ng-template>
			}
		</owl-carousel-o>
	}
}

I get the following warning in the browser console,

branch-viewer.component.html:2 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.

options I use :

  customOptions: OwlOptions = {
    loop: true,
    center: true,
    autoplay: false,
    autoplayTimeout: 5000,
    autoplayHoverPause: true,
    mouseDrag: true,
    touchDrag: true,
    pullDrag: true,
    navText: ['', ''],
    responsive: {
      0: {
        items: 1,
        margin: 4,
        stagePadding: 4,
      },
      600: {
        items: 1,
        margin: 16,
        stagePadding: 50,
      }
    },
  }

I know it's just a warning for performance recommendation, however it worth to mention and better to fix,