Safari：自定义光标在单击时更改为默认值

Question

我有一个很奇怪的问题：

我有一个页面，上面有一些视频。当我将鼠标悬停在视频上时，光标会变为自定义播放按钮。当您点击视频并开始播放时，光标会变为暂停按钮（反之亦然）。

除 Safari 外，此过程在所有浏览器中都能完美运行。当我将鼠标悬停在视频上时会显示自定义光标，但是当我单击视频时，自定义光标会显示几分之一秒，但随后会变为默认光标。当我移动光标时，它再次变为自定义光标。所以问题只出在点击事件上。

这是我的代码：

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;
}

有没有人遇到过类似的问题？这是 Safari 中的错误还是我做错了什么？

编辑：做了一个例子的快速jsfiddle： https://jsfiddle.net/du1Lzwra/

Answer 1

这里有一个 workaround/solution 可以让它在 Safari 中工作。只是在一定时间内添加了settimeout。更改它们可能会停止工作...

$(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

Safari：自定义光标在单击时更改为默认值

Safari: Custom cursor changes to default on click

jquery

css

browser

safari

cursor