setInterval won't change image on Safari, but on Chrome - html

Question

I have a mock array that distributes data. One component uses this data to display a list of cases. Each case has allocated images. When one case is being hovered, only then these images are being displayed, but only one at a time - every interval of 300ms the images changes.
My code works, but I have trouble with Safari - the image won't change. Somehow Safari can't handle it. Increasing the interval from 300m to 3000ms made it work, but that's not the way I want it to work.
Looking at the code in safari proves that the image actually switches every 300ms, since the img source changes - but the change won't be displayed.
BTW I tried it with Chrome and it worked fine.
export class CaseListComponent implements OnInit {
counter = 1;
cases;
interval;
image: string;
array = [];
mouseEnter(url: string, url2: string, url3: string, name: string) {
clearInterval(this.interval);
this.array = [url, url2, url3];
this.image = this.array[0];
this.changeImage();
}
changeImage() {
this.interval = setInterval(() => {
this.image = this.array[this.counter];
this.counter = this.counter === 2 ? 0 : this.counter + 1;
}, 300);
}
mouseLeave() {
clearInterval(this.interval);
this.image = null;
this.highlightedItem = null;
}
constructor(private casesService: CasesService) {}
ngOnInit() {
this.cases = this.casesService.data;
}
}
<div class="container-fluid d-flex justify-content-center">
<div class="row">
<div class="col-12 text-center" *ngFor="let case of cases" [class.z-index]="highlightedItem === case.name">
<p class="d-inline-block" routerLink="/cases/{{ case.id }}" (mouseenter)="mouseEnter(case.image, case.image2, case.image3, case.name)" (mouseleave)="mouseLeave()"
[style.color]="highlightedItem !== case.name && highlightedItem !== null ? '#f1f1f1' : '#33393D'">{{ case.name }}</p>
</div>
</div>
<img *ngIf="!!image" [src]="image" alt="image" class="position-fixed align-self-center">
</div>

Answer 1

Following my comment, you should use observables.
They are heavily used in Angular and you can rely on it for your change detection.
Here is a simple example of the observables in action, without Angular. Simply adapt this to your code (and ask if you have any issue) to make Angular handle the picture changes.
Sandbox
import { fromEvent, Subscription, timer } from "rxjs";
import {} from "rxjs/operators";
const container = document.querySelector(".container");
let subscription: Subscription;
let count = 0;
const cycler = timer(0, 500);
fromEvent(container, "mouseenter").subscribe(() => {
subscription = cycler.subscribe(() => {
count++;
container.textContent = count;
});
});
fromEvent(container, "mouseleave").subscribe(() => {
subscription && subscription.unsubscribe();
container.textContent = "";
count = 0;
});