Safari: Custom cursor changes to default on click

Question

I have a very odd issue:

I have a page with a few videos on it. When I hover over a video, the cursor changes to a custom play button. When you click on a video and it starts to play, the cursor changes to a pause button (and vice versa).

This process works perfectly in every browser, except for Safari. The custom cursor is displayed when I hover over a video, but as soon as I click on a video, the custom cursor shows up for a fraction of a second, but then it changes to the default cursor. When I move the cursor, it changes to the custom cursor again. So the problem is only with the click event.

This is my code:

jQuery:

$(document).ready(function() {
  $(".container-video").click(function(){
    ($(this)[0].paused)?$(this)[0].play():$(this)[0].pause();
    if(($(this)[0].paused))
    $(this).addClass("paused").removeClass("playing");
    else
    $(this).addClass("playing").removeClass("paused");
  });
});

CSS:

.paused {
   cursor: url(/images/play-button.cur), url(/images/play-button.cur), auto;
 }

.playing {
  cursor: url(/images/pause-button.cur), url(/images/pause-button.cur), auto;
}

Did anybody else ever encounter a similar problem? Is this a bug in Safari or am I doing something wrong?

Edit: Made a quick jsfiddle of an example: https://jsfiddle.net/du1Lzwra/

Answer 1

Here is a workaround/solution to make it work in Safari. Just added settimeout with certain time. Changing them may stop it working...

$(document).ready(function() {
  $(".container-video").click(function() {
    $(this)[0].paused ? $(this)[0].play() : $(this)[0].pause();
    if ($(this)[0].paused) {
      $(this).addClass("paused");
      setTimeout(() => {
        $(this).removeClass("playing");
      }, 269);
    } else {
      setTimeout(() => {
        $(this).addClass("playing");
        $(this).removeClass("paused")
      }, 481);
    }
  });
});

Demo